[migrate] replace Markdown IME with HTML editor

components/Form/HTMLEditor/index.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import {
+  AudioTool,
+  Editor,
+  EditorProps,
+  IFrameTool,
+  ImageTool,
+  OriginalTools,
+  VideoTool,
+} from 'react-bootstrap-editor';
+import { Constructor } from 'web-utility';
+
+const ExcludeTools = [IFrameTool, AudioTool, VideoTool];
+
+const CustomTools = OriginalTools.filter(
+  Tool => !ExcludeTools.includes(Tool as Constructor<IFrameTool>),
+);
+
+const HTMLEditor: FC<EditorProps> = props => (
+  <Editor tools={CustomTools} {...props} />
+);
+export default HTMLEditor;

components/Git/ArticleEditor.tsx

@@ -4,23 +4,21 @@ import { computed, observable } from 'mobx';
 import { GitContent } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { DataObject } from 'mobx-restful';
-import {
-  ChangeEvent,
-  Component,
-  createRef,
-  FormEvent,
-  MouseEvent,
-} from 'react';
+import dynamic from 'next/dynamic';
+import { ChangeEvent, Component, FormEvent, MouseEvent } from 'react';
 import { Button, Col, Form } from 'react-bootstrap';
 import { blobOf, formatDate, uniqueID } from 'web-utility';
 import YAML from 'yaml';
 
 import { GitRepositoryModel, userStore } from '../../models/Repository';
+import { i18n } from '../../models/Translation';
 import { ListField } from '../Form/JSONEditor';
-import { MarkdownEditor } from '../Form/MarkdownEditor';
 import { PathSelect } from './PathSelect';
 import { RepositorySelect } from './RepositorySelect';
 
+const { t } = i18n;
+const HTMLEditor = dynamic(() => import('../Form/HTMLEditor'), { ssr: false });
+
 export const fileType = {
   MarkDown: ['md', 'markdown'],
   JSON: ['json'],
@@ -39,6 +37,7 @@ export type HyperLink = HTMLAnchorElement | HTMLImageElement;
 export class ArticleEditor extends Component {
   @observable
   accessor repository = '';
+  editorContent = '';
 
   @computed
   get currentRepository() {
@@ -59,12 +58,6 @@ export class ArticleEditor extends Component {
   path = '';
   URL = '';
 
-  private Core = createRef<MarkdownEditor>();
-
-  get core() {
-    return this.Core.current;
-  }
-
   @observable
   accessor meta: PostMeta | null = null;
 
@@ -123,31 +116,27 @@ export class ArticleEditor extends Component {
       if (meta[1]) this.setPostMeta(meta[1]);
     }
 
-    if (this.core) this.core.raw = content;
+    this.editorContent = content;
   };
 
   reset = () => {
     this.meta = null;
-
-    if (this.core) this.core.raw = '';
+    this.editorContent = '';
   };
 
   onPathClear = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
     if (value.trim()) return;
 
-    this.meta = null;
-
-    if (this.core) this.core.raw = '';
+    this.reset();
   };
 
   fixURL = debounce(() => {
     const { repository } = this,
-      pageURL = window.location.href.split('?')[0];
+      pageURL = window.location.href.split('?')[0],
+      root = document.querySelector('div[contenteditable]');
 
-    if (this.core && this.core.root)
-      for (let element of this.core.root.querySelectorAll<HyperLink>(
-        '[href], [src]',
-      )) {
+    if (root)
+      for (let element of root.querySelectorAll<HyperLink>('[href], [src]')) {
         let URI =
           element instanceof HTMLAnchorElement ? element.href : element.src;
 
@@ -166,36 +155,37 @@ export class ArticleEditor extends Component {
 
   getContent() {
     const type = this.URL.split('.').slice(-1)[0],
-      { meta, core } = this;
+      { meta, editorContent } = this;
 
     if (fileType.JSON.includes(type)) return JSON.stringify(meta);
 
     if (fileType.YAML.includes(type)) return YAML.stringify(meta);
 
-    if (fileType.MarkDown.includes(type) && core) {
-      if (!meta) return core.raw;
+    if (fileType.MarkDown.includes(type) && editorContent) {
+      if (!meta) return editorContent;
       // @ts-ignore
       meta.updated = formatDate();
 
       return `---
   ${YAML.stringify(meta)}
   ---
 
-  ${core.raw}`;
+  ${editorContent}`;
     }
   }
 
   submit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const { currentRepository, repositoryStore, core } = this,
+    const { currentRepository, repositoryStore, editorContent } = this,
       // @ts-ignore
       { message } = event.currentTarget.elements;
 
-    if (!core?.root) return;
+    if (!editorContent) return;
 
+    const root = document.querySelector('div[contenteditable]');
     const media: HTMLMediaElement[] = [].filter.call(
-      core.root.querySelectorAll('img[src], audio[src], video[src]'),
+      root!.querySelectorAll('img[src], audio[src], video[src]'),
       ({ src }) => new URL(src).protocol === 'blob:',
     );
 
@@ -227,8 +217,8 @@ export class ArticleEditor extends Component {
   copyMarkdown = async (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
-    if (this.core) {
-      await navigator.clipboard.writeText(this.core.raw);
+    if (this.editorContent) {
+      await navigator.clipboard.writeText(this.editorContent);
 
       this.copied = true;
     }
@@ -260,39 +250,41 @@ export class ArticleEditor extends Component {
         onSubmit={this.submit}
       >
         <Form.Group className="row">
-          <label className="col-sm-2 col-form-label">Repository</label>
+          <label className="col-sm-2 col-form-label">{t('repository')}</label>
           <RepositorySelect
             onChange={({ owner, name }) =>
               (this.repository = `${owner}/${name}`)
             }
           />
         </Form.Group>
         <Form.Group className="row">
-          <label className="col-sm-2 col-form-label">File path</label>
+          <label className="col-sm-2 col-form-label">{t('filePath')}</label>
 
           {repository && (
             <PathSelect repository={repository} onChange={this.loadFile} />
           )}
         </Form.Group>
         <Form.Group className="row align-items-center">
-          <label className="col-sm-2 col-form-label">Commit message</label>
+          <label className="col-sm-2 col-form-label">
+            {t('commitMessage')}
+          </label>
           <Col sm={7}>
             <Form.Control as="textarea" name="message" required />
           </Col>
           <Col
             sm={3}
             className="d-flex flex-wrap gap-2 justify-content-around align-items-center"
           >
-            <Button type="submit">Commit</Button>
+            <Button type="submit">{t('commit')}</Button>
             <Button type="reset" variant="danger">
-              Clear
+              {t('clear')}
             </Button>
           </Col>
         </Form.Group>
 
         {meta && (
           <Form.Group>
-            <label>Meta</label>
+            <label>{t('meta')}</label>
             <ListField
               value={meta}
               onChange={({ currentTarget: { value } }) =>
@@ -303,17 +295,20 @@ export class ArticleEditor extends Component {
         )}
         <Form.Group onInput={this.fixURL}>
           <div className="d-flex justify-content-between align-items-center my-2">
-            <label>Content</label>
+            <label>{t('content')}</label>
             <Button
               variant="secondary"
               size="sm"
               onClick={this.copyMarkdown}
               onBlur={() => (this.copied = false)}
             >
-              {copied ? '√' : ''} Copy MarkDown
+              {copied ? '√' : ''} {t('copyMarkDown')}
             </Button>
           </div>
-          <MarkdownEditor ref={this.Core} />
+          <HTMLEditor
+            defaultValue={this.editorContent}
+            onChange={value => (this.editorContent = value)}
+          />
         </Form.Group>
       </Form>
     );

package.json

@@ -35,6 +35,7 @@
     "primereact": "^10.6.6",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
+    "react-bootstrap-editor": "^2.0.4",
     "react-dom": "^18.3.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",

translation/en-US.ts

@@ -108,4 +108,14 @@ export default {
   range_file: 'file',
   range_module: 'module',
   last_step: 'back',
+
+  // git pager
+  repository: 'repository',
+  filePath: 'filePath',
+  commitMessage: 'commit Message',
+  commit: 'commit',
+  clear: 'clear',
+  meta: 'meta',
+  content: 'content',
+  copyMarkDown: 'copy Markdown',
 } as const;

translation/zh-CN.ts

@@ -105,4 +105,14 @@ export default {
   range_file: '文件',
   range_module: '模块',
   last_step: '上一步',
+
+  // git pager
+  repository: '代码仓库',
+  filePath: '文件路径',
+  commitMessage: '提交信息',
+  commit: '提交',
+  clear: '清空',
+  meta: '元数据',
+  content: '内容',
+  copyMarkDown: '复制 Markdown',
 } as const;