WaniKani Markdown Editor Notes (2023)

Write Markdown and HTML in the notes
Wrap lines
// ==UserScript==
// @name         WaniKani Markdown Editor Notes (2023)
// @namespace    wanikani
// @description  Write Markdown and HTML in the notes
// @version      2.2.0
// @require      https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js
// @require      https://unpkg.com/dexie@3/dist/dexie.js
// @require      https://gf.qytechs.cn/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1276693
// @icon         https://www.google.com/s2/favicons?sz=64&domain=markdownguide.org
// @match        *://www.wanikani.com/*
// @match        *://preview.wanikani.com/*
// @license      MIT
// @homepage     https://gf.qytechs.cn/en/scripts/468764-wanikani-markdown-editor-notes-2023
// @source       https://github.com/patarapolw/wanikani-userscript/blob/master/userscripts/markdown-notes.user.js
// @supportURL   https://community.wanikani.com/t/userscript-markdown-editor-notes-2023/62246
// @grant        none
// ==/UserScript==
 
// @ts-check
/// <reference path="./types/item-info.d.ts" />
(function () {
  'use strict';
 
  const entryClazz = 'wk-markdown-notes';
 
  // @ts-ignore
  const _Dexie = /** @type {typeof import('dexie').default} */ (Dexie);
  /**
   * @typedef {{ id: number; state: any; markdown: string }} EntryMarkdown
   */
 
  class Database extends _Dexie {
    /** @type {import('dexie').Table<EntryMarkdown, number>} */
    markdown;
 
    constructor() {
      super(entryClazz);
      this.version(8)
        .stores({
          markdown: 'id,state.characters',
        })
        .upgrade((tx) => {
          const toKeep = [];
          tx.table('markdown')
            .each((it) => {
              if (it.markdown.trim()) {
                toKeep.push(it.id);
              }
            })
            .then(() => {
              return tx.table('markdown').where('id').noneOf(toKeep).delete();
            });
        });
    }
  }
 
  const wkMarkdown = {};
  Object.assign(window, { wkMarkdown });
 
  const db = new Database();
  wkMarkdown.db = db;
 
  /** @type {HTMLElement} */
  let elEditor;
  /** @type {import('@toast-ui/editor').Editor} */
  let editor;
  /** @type {WKItemInfoState} */
  let state;
  /** @type {EntryMarkdown | undefined} */
  let currentEntry;
 
  const injector = wkItemInfo
    .under('meaning,reading')
    .spoiling('nothing')
    .append('Markdown Notes', (o) => {
      save();
      state = o;
 
      const onElLoaded = () => {
        db.markdown.get(state.id).then((entry) => {
          currentEntry = entry;
          const md = entry?.markdown;
          setTimeout(() => {
            if (!editor) return;
 
            editor.changePreviewStyle('vertical');
            if (md) {
              editor.exec('toggle-preview');
            }
 
            setTimeout(() => {
              editor.blur();
            });
          });
 
          if (editor) {
            editor.setMarkdown(md || '');
          } else {
            /** @type {import('@toast-ui/editor').EditorOptions} */
            const opts = {
              el: elEditor,
              initialEditType: 'markdown',
              previewStyle: 'vertical',
              hideModeSwitch: true,
              linkAttributes: {
                target: '_blank',
              },
              toolbarItems: [
                ['heading', 'bold', 'italic', 'strike'],
                [
                  {
                    name: 'big',
                    tooltip: 'Big',
                    command: 'big',
                    text: 'BIG',
                    className: 'toastui-editor-toolbar-icons',
                    style: {
                      backgroundImage: 'none',
                      fontSize: '0.7em',
                      fontFamily: 'sans-serif',
                    },
                  },
                  {
                    name: 'furigana',
                    tooltip: 'Furigana',
                    command: 'furigana',
                    text: 'ふ',
                    className: 'toastui-editor-toolbar-icons',
                    style: {
                      backgroundImage: 'none',
                      fontSize: '1em',
                      fontFamily: 'sans-serif',
                    },
                  },
                  {
                    name: 'subject-type',
                    tooltip: 'Subject type',
                    text: '漢',
                    className: 'toastui-editor-toolbar-icons',
                    style: {
                      backgroundImage: 'none',
                      fontSize: '1em',
                      fontFamily: 'sans-serif',
                    },
                    popup: {
                      className: 'toastui-editor-popup-add-heading',
                      body: ((el) => {
                        el.className = 'toastui-editor-popup-body';
 
                        const ul = document.createElement('ul');
                        ul.setAttribute('aria-role', 'menu');
                        el.append(ul);
 
                        for (const p of ['rad', 'kan', 'voc', 'read']) {
                          const li = document.createElement('li');
                          ul.append(li);
                          li.setAttribute('aria-role', 'menuitem');
 
                          switch (p) {
                            case 'rad':
                              li.innerText = 'Radical';
                              break;
                            case 'kan':
                              li.innerText = 'Kanji';
                              break;
                            case 'voc':
                              li.innerText = 'Vocabulary';
                              break;
                            default:
                              li.innerText = 'Reading';
                          }
                          li.title = li.innerText;
 
                          li.onclick = () => {
                            const text = editor.getSelectedText();
                            if (text) {
                              editor.replaceSelection(`#${p}#${text}#/${p}#`);
                            }
                          };
                        }
 
                        return el;
                      })(document.createElement('div')),
                    },
                  },
                ],
                ['hr', 'quote'],
                ['ul', 'ol'],
                ['table', 'image', 'link'],
                // ['code', 'codeblock'],
                ['scrollSync'],
                [
                  {
                    name: 'preview',
                    tooltip: 'Preview',
                    el: ((btn) => {
                      btn.type = 'button';
                      btn.className =
                        'fa fa-eye toastui-editor-toolbar-icons toggle-preview';
                      btn.style.backgroundImage = 'none';
                      btn.style.fontSize = '1em';
                      btn.style.margin = '-7px -5px';
                      btn.onclick = () => {
                        editor.exec('toggle-preview');
                      };
                      return btn;
                    })(document.createElement('button')),
                  },
                  {
                    name: 'save',
                    tooltip: 'Save/Reload',
                    command: 'save',
                    text: '',
                    className: 'fa fa-save toastui-editor-toolbar-icons',
                    style: { backgroundImage: 'none', fontSize: '1em' },
                  },
                ],
              ],
              previewHighlight: false,
              customHTMLSanitizer: (s) => {
                return s;
              },
              customHTMLRenderer: {
                htmlInline: {
                  big(node, { entering }) {
                    const { attrs = {} } = node;
                    attrs.style = 'font-size: 2em';
                    return entering
                      ? {
                          type: 'openTag',
                          tagName: 'span',
                          attributes: attrs,
                        }
                      : { type: 'closeTag', tagName: 'span' };
                  },
                  small(node, { entering }) {
                    const { attrs = {} } = node;
                    attrs.style = 'font-size: 0.7em';
                    return entering
                      ? {
                          type: 'openTag',
                          tagName: 'span',
                          attributes: attrs,
                        }
                      : { type: 'closeTag', tagName: 'span' };
                  },
                },
                text: function (node, ctx) {
                  /** @type {import('@toast-ui/editor/types/toastmark').HTMLToken[]} */
                  const out = [];
 
                  /**
                   *
                   * @param {string} tag
                   * @param {() => void} doInside
                   */
                  const addTag = (tag, doInside) => {
                    out.push({
                      type: 'openTag',
                      tagName: tag,
                    });
 
                    doInside();
 
                    out.push({
                      type: 'closeTag',
                      tagName: tag,
                    });
                  };
 
                  /**
                   *
                   * @param {string} rb
                   * @param {string} rt
                   */
                  const addRubyContent = (rb, rt) => {
                    addTag('ruby', () => {
                      out.push({
                        type: 'text',
                        content: rb,
                      });
 
                      addTag('rp', () => {
                        out.push({
                          type: 'text',
                          content: '(',
                        });
                      });
 
                      addTag('rt', () => {
                        out.push({
                          type: 'text',
                          content: rt,
                        });
                      });
 
                      addTag('rp', () => {
                        out.push({
                          type: 'text',
                          content: ')',
                        });
                      });
                    });
                  };
 
                  /**  @param {string} s */
                  const wkFuriganaParser = (s) => {
                    const segments = s.split(/<(.+?)>\[(.+?)\]/g);
                    while (segments.length) {
                      const [raw, rb, rt] = segments.splice(0, 3);
                      out.push({
                        type: 'text',
                        content: raw,
                      });
 
                      if (rb) {
                        addRubyContent(rb, rt);
                      }
                    }
                  };
 
                  /**  @param {string} s */
                  const mdItFuriganaParser = (s) => {
                    const segments = s.split(/\[(.+?)\]\{(.+?)\}/g);
                    while (segments.length) {
                      const [raw, rb, rt] = segments.splice(0, 3);
                      wkFuriganaParser(raw);
 
                      if (rb) {
                        addTag('ruby', () => {
                          let rbArr = rb.split('.');
                          if (rbArr.length === 1) {
                            rbArr = rb.split('');
                          }
                          const rtArr = rt.split('.');
 
                          if (rbArr.length >= rtArr.length) {
                            rtArr.map((t, i) => {
                              if (i < rtArr.length - 1) {
                                addRubyContent(rbArr[i], t);
                              } else {
                                addRubyContent(rbArr.slice(i).join(''), t);
                              }
                            });
                          } else {
                            addRubyContent(rb, rt);
                          }
                        });
                      }
                    }
                  };
 
                  /** @param {string} s */
                  const wkMarkParser = (s) => {
                    const segments = s.split(
                      /#(rad|kan|voc|read)#(.+?)#\/\1#/g,
                    );
                    while (segments.length) {
                      const [raw, p, text] = segments.splice(0, 3);
                      mdItFuriganaParser(raw);
 
                      if (text) {
                        let className = '';
                        let title = '';
 
                        switch (p) {
                          case 'rad':
                            className = 'radical-highlight';
                            title = 'Radical';
                            break;
                          case 'kan':
                            className = 'kanji-highlight';
                            title = 'Kanji';
                            break;
                          case 'voc':
                            className = 'vocabulary-highlight';
                            title = 'Vocabulary';
                            break;
                          default:
                            className = 'reading-highlight';
                            title = 'Reading';
                        }
 
                        out.push(
                          {
                            type: 'openTag',
                            tagName: 'span',
                            classNames: [className],
                            attributes: { title },
                          },
                          {
                            type: 'text',
                            content: text,
                          },
                          {
                            type: 'closeTag',
                            tagName: 'span',
                          },
                        );
                      }
                    }
                  };
 
                  wkMarkParser(node.literal || '');
 
                  return out;
                },
              },
              autofocus: false,
              initialValue: md,
            };
 
            // @ts-ignore
            editor = new toastui.Editor(opts);
            wkMarkdown.editor = editor;
 
            editor.addCommand('markdown', 'save', () => {
              save();
              const md = editor.getMarkdown();
              // editor.reset();
              editor.setMarkdown(md, false);
              return true;
            });
 
            editor.addCommand('markdown', 'toggle-preview', () => {
              if (editor.getCurrentPreviewStyle() === 'tab') {
                editor.changePreviewStyle('vertical');
              } else {
                editor.changePreviewStyle('tab');
                const elPreviewButton = elEditor.querySelector(
                  '.toastui-editor-tabs > .tab-item:last-child',
                );
 
                if (elPreviewButton instanceof HTMLElement) {
                  elPreviewButton.click();
                }
              }
              return false;
            });
 
            editor.addCommand('markdown', 'big', () => {
              const text = editor.getSelectedText();
              if (text) {
                editor.replaceSelection(`<big>${text}</big>`);
                return true;
              }
              return false;
            });
 
            editor.addCommand('markdown', 'furigana', () => {
              const text = editor.getSelectedText();
              if (text) {
                editor.replaceSelection(`[${text}]{ふり}`);
                return true;
              }
              return false;
            });
 
            editor.on('blur', () => {
              save();
            });
          }
        });
      };
 
      if (!elEditor) {
        elEditor = document.createElement('div');
        elEditor.id = 'wk-markdown-editor';
        elEditor.lang = 'ja';
        elEditor.onkeydown = (ev) => {
          ev.stopImmediatePropagation();
          ev.stopPropagation();
        };
      }
 
      onElLoaded();
 
      return elEditor;
    });
 
  window.addEventListener('willShowNextQuestion', () => {
    injector.renew();
  });
 
  function save(force = true) {
    if (editor) {
      const markdown = editor.getMarkdown().trim();
      if (markdown || currentEntry) force = true;
 
      if (force) {
        db.markdown.put({ id: state.id, state, markdown }, state.id);
      }
 
      if (!elEditor) {
        editor.destroy();
      }
    }
  }
 
  const isClickedClass = 'is-clicked';
 
  (function add_css() {
    const style = document.createElement('style');
 
    const K = '.toastui-editor-defaultUI';
 
    style.append(
      document.createTextNode(/* css */ `
    @import url("https://uicdn.toast.com/editor/latest/toastui-editor.min.css");
 
    ${K} {
      /* Font list from Jisho.org */
      --md-font-family-sans-serif: "Source Han Sans", "源ノ角ゴシック", "Hiragino Sans", "HiraKakuProN-W3", "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans", "Noto Sans CJK JP", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
      --md-font-family-serif: "HiraMinProN-W3", "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "MS Mincho", serif;
      --md-font-family: var(--md-font-family-sans-serif);
 
      background-color: #fff;
    }
 
    ${K} .ProseMirror {
      font-family: var(--md-font-family);
    }
 
    ${K} .toastui-editor-md-preview * {
      font-family: var(--md-font-family);
    }
 
    ${K} .serif {
      font-family: var(--md-font-family-serif);
    }
 
    ${K} .sans,
    ${K} .sans-serif {
      font-family: var(--md-font-family-sans-serif);
    }
 
    ${K} .toastui-editor-md-tab-container {
      display: none !important;
    }
 
    ${K} .toastui-editor-toolbar-icons.${isClickedClass} {
      background-color: gray;
    }
    `),
    );
 
    document.head.append(style);
  })();
})();
欢迎访问Greasy Fork镜像
