كيف أضيف دعم محرر النصوص المنسقة إلى امتداد markdown الخاص بي؟

مطور
2

بعد الكثير من الصداع وإضافة العديد من console.log()s إلى discourse، اكتشفت سبب عدم عمله، وكيفية جعله يعمل.

لا يتم التحليل باستخدام html المعروض، بل باستخدام رموز markdownit. كنت أستخدم state.push(html_raw) في دالة replace() لعرض علامات bbcode الخاصة بي [snapblocks].

// assets/javascripts/lib/discourse-markdown/snapblocks-discourse.js

export function(helper) {
  md.block.bbcode.ruler.push("snapblocks", {
      tag: "snapblocks",
      replace(state, tagInfo, content) {
        let token = state.push('html_raw', '', 0)
        token.content = `<pre class="snapblocks-blocks">${content}</pre>`
      },
    });
}

كانت المشكلة هي أن نوع الرمز html_raw يتم تجاهله بواسطة محول محرر النصوص الغنية. مما يعني أنه لا يمكنك استخدام هذا إذا كنت تريد دعم محرر النصوص الغنية.

اكتشفت أنه باستخدام bbcode_open و text و bbcode_close، يمكنني جعله يعمل.

// assets/javascripts/lib/discourse-markdown/snapblocks-discourse.js

export function(helper) {
  md.block.bbcode.ruler.push("snapblocks", {
      tag: "snapblocks",
      replace(state, tagInfo, content) {
        let token = state.push('bbcode_open', 'pre', 1)
        token.attrs = [['class', 'snapblocks-discourse']]

        token = state.push('text', '', 0)
        token.content = content

        token = token.push('bbcode_close', 'pre', -1)
        token.attrs = [['class', 'snapblocks-discourse']] // needed for later checks
      },
    });
}

بمجرد الانتهاء من ذلك، لن يتم تجاهل هذا بعد الآن.

بالانتقال إلى rich-text-editor-extension.js، ثم تقوم بذلك.

// assets/javascripts/lib/rich-text-editor-extension.js

import { i18n } from "discourse-i18n";

const SNAPBLOCKS_NODES = ["inline_snapblocks", "snapblocks"];

/** @type {RichEditorExtension} */
const extension = {
    snapblocks: {
      attrs: { rendered: { default: true } },
      code: true,
      group: "block",
      content: "text*", // This is needed
      createGapCursor: true,
      parseDOM:[{ tag: "pre.snapblocks-blocks" }],
      toDOM: () => ["pre", { class: "snapblocks-blocks" }, 0],
    },
  },
  parse: {
    bbcode_open(state, token) {
      // The token here is the same `bbcode_open` token object
      // from the previous code
      if (token.attrGet('class') === 'snapblocks-blocks') {
        state.openNode(state.schema.nodes.snapblocks, {
          open: token.attrGet("open") !== null,
        });
        return true;
      }
    },
    bbcode_close(state, token) {
      if (token.attrGet('class') === 'snapblocks-blocks') {
        state.closeNode();
        return true;
      }
    },
  },
  serializeNode: {
    snapblocks(state, node) {
      // This just converts it back to plain text markdown
      state.write("[snapblocks]\n");
      state.renderContent(node);
      state.write("\n[/snapblocks]\n\n");
    },
  },
}

المفاتيح في خاصية parse هي محللات لنوع الرمز الذي يمكن استخدامه في محلل markdown.

هناك بالتأكيد المزيد من التفاصيل حول هذا الأمر، ولكن على الأقل هذا يوضح الأمور بشكل أفضل بكثير من ذي قبل.

إعجاب واحد (1)