feat: Obsidian comments could be ignored or convert to HTML comments.

Author: devbean

main.js

@@ -70,6 +70,12 @@
   "settings_MathJaxOutputTypeTeXDesc": "Convert MathJax to TeX directly. WordPress needs install MathJax related plugin, such as simple-mathjax.",
   "settings_mathJaxOutputTypeSVG": "SVG",
   "settings_MathJaxOutputTypeSVGDesc": "Convert MathJax to SVG. Browser render SVG, no plugin needed for WordPress.",
+  "settings_commentConvertMode": "Comment convert",
+  "settings_commentConvertModeDesc": "Select how to convert Obsidian notes comments.",
+  "settings_commentConvertModeIgnore": "Ignore",
+  "settings_commentConvertModeIgnoreDesc": "Just ignore all comments and convert comments to empty.",
+  "settings_commentConvertModeHTML": "HTML",
+  "settings_commentConvertModeHTMLDesc": "Convert Obsidian notes comments to HTML comments.",
   "settings_enableHtml": "Enable HTML",
   "settings_enableHtmlDesc": "Enable HTML tags in notes. This might cause XSS attack to your WordPress.",
   "settings_replaceMediaLinks": "Replace media links",

src/i18n/en.json

@@ -70,6 +70,12 @@
   "settings_MathJaxOutputTypeTeXDesc": "将 MathJax 公式输出为 TeX 格式。WordPress 需要安装 MathJax 相关插件，例如 simple-mathjax",
   "settings_mathJaxOutputTypeSVG": "SVG",
   "settings_MathJaxOutputTypeSVGDesc": "将 MathJax 公式输出为 SVG 格式。浏览器可以直接显示 SVG 矢量图，WordPress 无需任何处理",
+  "settings_commentConvertMode": "注释转换",
+  "settings_commentConvertModeDesc": "选择如何处理笔记中的注释",
+  "settings_commentConvertModeIgnore": "忽略",
+  "settings_commentConvertModeIgnoreDesc": "忽略所有注释，将其转换为空白字符串",
+  "settings_commentConvertModeHTML": "HTML",
+  "settings_commentConvertModeHTMLDesc": "将笔记中的注释转换为 HTML 注释",
   "settings_enableHtml": "启用 HTML",
   "settings_enableHtmlDesc": "启用笔记中的 HTML 标签。这可能导致针对 WordPress 的 XSS 攻击",
   "settings_replaceMediaLinks": "替换媒体链接",

src/i18n/zh-cn.json

@@ -0,0 +1,65 @@
+import MarkdownIt from 'markdown-it';
+import { CommentConvertMode } from './plugin-settings';
+
+const tokenType = 'ob_comment';
+
+interface MarkdownItCommentPluginOptions {
+  convertMode: CommentConvertMode;
+}
+
+const pluginOptions: MarkdownItCommentPluginOptions = {
+  convertMode: CommentConvertMode.Ignore,
+}
+
+export const MarkdownItCommentPluginInstance = {
+  plugin: plugin,
+  updateConvertMode: (mode: CommentConvertMode) => {
+    pluginOptions.convertMode = mode;
+  },
+}
+
+function plugin(md: MarkdownIt): void {
+  md.inline.ruler.before('emphasis', tokenType, (state, silent) => {
+    const start = state.pos;
+    const max = state.posMax;
+    const src = state.src;
+
+    // check if start with %%
+    if (src.charCodeAt(start) !== 0x25 /* % */ || start + 4 >= max) {
+      return false;
+    }
+    if (src.charCodeAt(start + 1) !== 0x25 /* % */) {
+      return false;
+    }
+
+    // find ended %%
+    let end = start + 2;
+    while (end < max && (src.charCodeAt(end) !== 0x25 /* % */ || src.charCodeAt(end + 1) !== 0x25 /* % */)) {
+      end++;
+    }
+
+    if (end >= max) {
+      return false;
+    }
+
+    end += 2; // skip ended %%
+
+    if (!silent) {
+      const token = state.push(tokenType, 'comment', 0);
+      token.content = src.slice(start + 2, end - 2).trim();
+      state.pos = end;
+      return true;
+    }
+
+    state.pos = end;
+    return true;
+  });
+
+  md.renderer.rules[tokenType] = (tokens, idx) => {
+    if (pluginOptions.convertMode === CommentConvertMode.HTML) {
+      return `<!-- ${tokens[idx].content} -->`;
+    } else {
+      return '';
+    }
+  };
+}

src/markdown-it-comment-plugin.ts

@@ -23,6 +23,11 @@ export const enum MathJaxOutputType {
   SVG = 'svg'
 }
 
+export const enum CommentConvertMode {
+  Ignore = 'ignore',
+  HTML = 'html'
+}
+
 export interface WordpressPluginSettings {
 
   version?: SettingsVersion;
@@ -61,6 +66,8 @@ export interface WordpressPluginSettings {
 
   mathJaxOutputType: MathJaxOutputType;
 
+  commentConvertMode: CommentConvertMode;
+
   enableHtml: boolean;
 
   /**
@@ -78,6 +85,7 @@ export const DEFAULT_SETTINGS: WordpressPluginSettings = {
   rememberLastSelectedCategories: true,
   showWordPressEditConfirm: false,
   mathJaxOutputType: MathJaxOutputType.SVG,
+  commentConvertMode: CommentConvertMode.Ignore,
   enableHtml: false,
   replaceMediaLinks: true,
 }
@@ -99,7 +107,8 @@ export async function upgradeSettings(
         defaultPostType: 'post',
         rememberLastSelectedCategories: existingSettings.rememberLastSelectedCategories,
         showWordPressEditConfirm: existingSettings.showWordPressEditConfirm,
-        mathJaxOutputType: existingSettings.mathJaxOutputType
+        mathJaxOutputType: existingSettings.mathJaxOutputType,
+        commentConvertMode: existingSettings.commentConvertMode,
       });
       if (existingSettings.endpoint) {
         const endpoint = existingSettings.endpoint;

src/plugin-settings.ts

@@ -3,7 +3,7 @@ import WordpressPlugin from './main';
 import { CommentStatus, PostStatus } from './wp-api';
 import { TranslateKey } from './i18n';
 import { WpProfileManageModal } from './wp-profile-manage-modal';
-import { MathJaxOutputType } from './plugin-settings';
+import { CommentConvertMode, MathJaxOutputType } from './plugin-settings';
 import { WpProfile } from './wp-profile';
 import { setupMarkdownParser } from './utils';
 import { AppState } from './app-state';
@@ -33,13 +33,25 @@ export class WordpressSettingTab extends PluginSettingTab {
       }
     }
 
+    const getCommentConvertModeDesc = (type: CommentConvertMode): string => {
+      switch (type) {
+        case CommentConvertMode.Ignore:
+          return t('settings_commentConvertModeIgnoreDesc');
+        case CommentConvertMode.HTML:
+          return t('settings_commentConvertModeHTMLDesc');
+        default:
+          return '';
+      }
+    }
+
 		const { containerEl } = this;
 
 		containerEl.empty();
 
     containerEl.createEl('h1', { text: t('settings_title') });
 
     let mathJaxOutputTypeDesc = getMathJaxOutputTypeDesc(this.plugin.settings.mathJaxOutputType);
+    let commentConvertModeDesc = getCommentConvertModeDesc(this.plugin.settings.commentConvertMode);
 
     new Setting(containerEl)
       .setName(t('settings_profiles'))
@@ -147,6 +159,28 @@ export class WordpressSettingTab extends PluginSettingTab {
       cls: 'setting-item-description'
     });
 
+    new Setting(containerEl)
+      .setName(t('settings_commentConvertMode'))
+      .setDesc(t('settings_commentConvertModeDesc'))
+      .addDropdown((dropdown) => {
+        dropdown
+          .addOption(CommentConvertMode.Ignore, t('settings_commentConvertModeIgnore'))
+          .addOption(CommentConvertMode.HTML, t('settings_commentConvertModeHTML'))
+          .setValue(this.plugin.settings.commentConvertMode)
+          .onChange(async (value) => {
+            this.plugin.settings.commentConvertMode = value as CommentConvertMode;
+            commentConvertModeDesc = getCommentConvertModeDesc(this.plugin.settings.commentConvertMode);
+            await this.plugin.saveSettings();
+            this.display();
+
+            setupMarkdownParser(this.plugin.settings);
+          });
+      });
+    containerEl.createEl('p', {
+      text: commentConvertModeDesc,
+      cls: 'setting-item-description'
+    });
+
     new Setting(containerEl)
       .setName(t('settings_enableHtml'))
       .setDesc(t('settings_enableHtmlDesc'))
@@ -157,7 +191,7 @@ export class WordpressSettingTab extends PluginSettingTab {
             this.plugin.settings.enableHtml = value;
             await this.plugin.saveSettings();
 
-            AppState.getInstance().markdownParser.set({
+            AppState.markdownParser.set({
               html: this.plugin.settings.enableHtml
             });
           }),

src/settings.ts

@@ -2,7 +2,7 @@ import { SafeAny } from './utils';
 import { isArray, isString } from 'lodash-es';
 
 export interface MarkdownItPlugin {
-  updateOptions: <OptionType> (option: OptionType) => void;
+  updateOptions: (opts: SafeAny) => void;
 }
 
 export type MatterData = { [p: string]: SafeAny };

src/types.ts

@@ -1,15 +1,15 @@
 import { App, Notice, Setting, TFile } from 'obsidian';
 import { WpProfile } from './wp-profile';
-import { AppState } from './app-state';
 import { WordpressPluginSettings } from './plugin-settings';
-import MarkdownItMathJax3Plugin from './markdown-it-mathjax3-plugin';
+import { MarkdownItMathJax3PluginInstance } from './markdown-it-mathjax3-plugin';
 import { WordPressClientResult, WordPressClientReturnCode, WordPressPostParams } from './wp-client';
 import { getWordPressClient } from './wp-clients';
 import WordpressPlugin from './main';
 import { isString } from 'lodash-es';
 import { ERROR_NOTICE_TIMEOUT } from './consts';
 import { format } from 'date-fns';
 import { MatterData } from './types';
+import { MarkdownItCommentPluginInstance } from './markdown-it-comment-plugin';
 
 export type SafeAny = any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -30,9 +30,8 @@ export function isPromiseFulfilledResult<T>(obj: SafeAny): obj is PromiseFulfill
 }
 
 export function setupMarkdownParser(settings: WordpressPluginSettings): void {
-  AppState.markdownParser.use(MarkdownItMathJax3Plugin, {
-    outputType: settings.mathJaxOutputType
-  });
+  MarkdownItMathJax3PluginInstance.updateOutputType(settings.mathJaxOutputType);
+  MarkdownItCommentPluginInstance.updateConvertMode(settings.commentConvertMode);
 }