@lstsystems/ckeditor5-source-editing-codemirror 47.5.1

package/dist/sourceediting-codemirror.js

@@ -0,0 +1,261 @@
+import { Plugin as g } from "ckeditor5";
+import { lineNumbers as m, highlightActiveLine as w, highlightActiveLineGutter as y, EditorView as f } from "@codemirror/view";
+import { EditorSelection as E, EditorState as x } from "@codemirror/state";
+import { html as S } from "@codemirror/lang-html";
+import { IndentContext as b, getIndentation as v, indentString as C, syntaxHighlighting as N, defaultHighlightStyle as O, indentOnInput as A, indentUnit as k } from "@codemirror/language";
+import B from "prettier/standalone";
+import * as P from "prettier/plugins/html";
+import * as z from "prettier/plugins/postcss";
+import * as D from "prettier/plugins/typescript";
+import * as L from "prettier/plugins/markdown";
+import * as j from "prettier/plugins/yaml";
+let I = 0;
+class s {
+  /**
+  Create a new node prop type.
+  */
+  constructor(e = {}) {
+    this.id = I++, this.perNode = !!e.perNode, this.deserialize = e.deserialize || (() => {
+      throw new Error("This node type doesn't define a deserialize function");
+    }), this.combine = e.combine || null;
+  }
+  /**
+  This is meant to be used with
+  [`NodeSet.extend`](#common.NodeSet.extend) or
+  [`LRParser.configure`](#lr.ParserConfig.props) to compute
+  prop values for each node type in the set. Takes a [match
+  object](#common.NodeType^match) or function that returns undefined
+  if the node type doesn't get this prop, and the prop's value if
+  it does.
+  */
+  add(e) {
+    if (this.perNode)
+      throw new RangeError("Can't add per-node props to node types");
+    return typeof e != "function" && (e = p.match(e)), (o) => {
+      let i = e(o);
+      return i === void 0 ? null : [this, i];
+    };
+  }
+}
+s.closedBy = new s({ deserialize: (t) => t.split(" ") });
+s.openedBy = new s({ deserialize: (t) => t.split(" ") });
+s.group = new s({ deserialize: (t) => t.split(" ") });
+s.isolate = new s({ deserialize: (t) => {
+  if (t && t != "rtl" && t != "ltr" && t != "auto")
+    throw new RangeError("Invalid value for isolate: " + t);
+  return t || "auto";
+} });
+s.contextHash = new s({ perNode: !0 });
+s.lookAhead = new s({ perNode: !0 });
+s.mounted = new s({ perNode: !0 });
+const T = /* @__PURE__ */ Object.create(null);
+class p {
+  /**
+  @internal
+  */
+  constructor(e, o, i, n = 0) {
+    this.name = e, this.props = o, this.id = i, this.flags = n;
+  }
+  /**
+  Define a node type.
+  */
+  static define(e) {
+    let o = e.props && e.props.length ? /* @__PURE__ */ Object.create(null) : T, i = (e.top ? 1 : 0) | (e.skipped ? 2 : 0) | (e.error ? 4 : 0) | (e.name == null ? 8 : 0), n = new p(e.name || "", o, e.id, i);
+    if (e.props) {
+      for (let r of e.props)
+        if (Array.isArray(r) || (r = r(n)), r) {
+          if (r[0].perNode)
+            throw new RangeError("Can't store a per-node prop on a node type");
+          o[r[0].id] = r[1];
+        }
+    }
+    return n;
+  }
+  /**
+  Retrieves a node prop for this type. Will return `undefined` if
+  the prop isn't present on this node.
+  */
+  prop(e) {
+    return this.props[e.id];
+  }
+  /**
+  True when this is the top node of a grammar.
+  */
+  get isTop() {
+    return (this.flags & 1) > 0;
+  }
+  /**
+  True when this node is produced by a skip rule.
+  */
+  get isSkipped() {
+    return (this.flags & 2) > 0;
+  }
+  /**
+  Indicates whether this is an error node.
+  */
+  get isError() {
+    return (this.flags & 4) > 0;
+  }
+  /**
+  When true, this node type doesn't correspond to a user-declared
+  named node, for example because it is used to cache repetition.
+  */
+  get isAnonymous() {
+    return (this.flags & 8) > 0;
+  }
+  /**
+  Returns true when this node's name or one of its
+  [groups](#common.NodeProp^group) matches the given string.
+  */
+  is(e) {
+    if (typeof e == "string") {
+      if (this.name == e)
+        return !0;
+      let o = this.prop(s.group);
+      return o ? o.indexOf(e) > -1 : !1;
+    }
+    return this.id == e;
+  }
+  /**
+  Create a function from node types to arbitrary values by
+  specifying an object whose property names are node or
+  [group](#common.NodeProp^group) names. Often useful with
+  [`NodeProp.add`](#common.NodeProp.add). You can put multiple
+  names, separated by spaces, in a single property name to map
+  multiple node names to a single value.
+  */
+  static match(e) {
+    let o = /* @__PURE__ */ Object.create(null);
+    for (let i in e)
+      for (let n of i.split(" "))
+        o[n] = e[i];
+    return (i) => {
+      for (let n = i.prop(s.group), r = -1; r < (n ? n.length : 0); r++) {
+        let a = o[r < 0 ? i.name : n[r]];
+        if (a)
+          return a;
+      }
+    };
+  }
+}
+p.none = new p(
+  "",
+  /* @__PURE__ */ Object.create(null),
+  0,
+  8
+  /* NodeFlag.Anonymous */
+);
+var h;
+(function(t) {
+  t[t.ExcludeBuffers = 1] = "ExcludeBuffers", t[t.IncludeAnonymous = 2] = "IncludeAnonymous", t[t.IgnoreMounts = 4] = "IgnoreMounts", t[t.IgnoreOverlays = 8] = "IgnoreOverlays", t[t.EnterBracketed = 16] = "EnterBracketed";
+})(h || (h = {}));
+new s({ perNode: !0 });
+function q(t, e) {
+  let o = -1;
+  return t.changeByRange((i) => {
+    let n = [];
+    for (let a = i.from; a <= i.to; ) {
+      let l = t.doc.lineAt(a);
+      l.number > o && (i.empty || i.to > l.from) && (e(l, n, i), o = l.number), a = l.to + 1;
+    }
+    let r = t.changes(n);
+    return {
+      changes: n,
+      range: E.range(r.mapPos(i.anchor, 1), r.mapPos(i.head, 1))
+    };
+  });
+}
+const H = ({ state: t, dispatch: e }) => {
+  if (t.readOnly)
+    return !1;
+  let o = /* @__PURE__ */ Object.create(null), i = new b(t, { overrideIndentation: (r) => {
+    let a = o[r];
+    return a ?? -1;
+  } }), n = q(t, (r, a, l) => {
+    let d = v(i, r.from);
+    if (d == null)
+      return;
+    /\S/.test(r.text) || (d = 0);
+    let u = /^\s*/.exec(r.text)[0], c = C(t, d);
+    (u != c || l.from < r.from + u.length) && (o[r.from] = d, a.push({ from: r.from, to: r.from + u.length, insert: c }));
+  });
+  return n.changes.empty || e(t.update(n, { userEvent: "indent" })), !0;
+};
+class Y extends g {
+  constructor() {
+    super(...arguments), this.view = null;
+  }
+  static get pluginName() {
+    return "SourceEditingCodeMirror";
+  }
+  static get requires() {
+    return ["SourceEditing"];
+  }
+  // Prettier 3 formatter
+  async formatWithPrettier(e) {
+    return await B.format(e, {
+      parser: "html",
+      plugins: [
+        P,
+        z,
+        D,
+        L,
+        j
+      ],
+      tabWidth: 4,
+      useTabs: !1
+    });
+  }
+  // Listen to SourceEditing mode changes
+  afterInit() {
+    const o = this.editor.plugins.get("SourceEditing");
+    this.listenTo(o, "change:isSourceEditingMode", async (i, n, r) => {
+      r ? await this.enableCodeMirror() : this.disableCodeMirror();
+    });
+  }
+  // Enable CodeMirror with Prettier formatting
+  async enableCodeMirror() {
+    const e = this.editor;
+    e.plugins.get("SourceEditing").updateEditorData();
+    const i = await this.formatWithPrettier(e.getData()), n = document.querySelector(".ck-source-editing-area");
+    if (!n)
+      return;
+    const r = n.querySelector("textarea");
+    r && (r.style.display = "none");
+    const a = document.createElement("div");
+    a.classList.add("cm-wrapper"), n.appendChild(a);
+    const l = [
+      m(),
+      w(),
+      y(),
+      N(O),
+      A(),
+      k.of("    ")
+    ], u = e.config.get("sourceEditingCodeMirror")?.extensions ?? [];
+    this.view = new f({
+      state: x.create({
+        doc: i,
+        extensions: [
+          ...l,
+          S(),
+          ...u,
+          f.updateListener.of((c) => {
+            c.docChanged && e.setData(c.state.doc.toString());
+          })
+        ]
+      }),
+      parent: a
+    }), this.view.dispatch({
+      selection: { anchor: 0, head: this.view.state.doc.length }
+    }), H(this.view);
+  }
+  // Disable CodeMirror and show original textarea
+  disableCodeMirror() {
+    this.view && (this.view.destroy(), this.view = null);
+    const e = document.querySelector(".ck-source-editing-area textarea");
+    e && (e.style.display = "");
+  }
+}
+export {
+  Y as default
+};

package/index.d.ts

@@ -0,0 +1,4 @@
+declare module "ckeditor5-source-editing-codemirror" {
+    const plugin: any;
+    export default plugin;
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@lstsystems/ckeditor5-source-editing-codemirror",
+  "description": "Source editing plugin for CKEditor 5 using CodeMirror.",
+  "private": false,
+  "version": "47.5.1",
+  "type": "module",
+  "main": "dist/sourceediting-codemirror.js",
+  "module": "dist/sourceediting-codemirror.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/sourceediting-codemirror.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.15",
+    "ckeditor5": "^47.5.0",
+    "prettier": "^3.8.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "author": "LST Systems",
+  "license": "SEE LICENSE.md",
+  "homepage": "https://github.com/AlphaDepot/ckeditor5-source-editing-codemirror"
+}

package/playwright/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        editor: any;
+    }
+}
+
+export {};

package/playwright/source-editing-code-mirror.spec.js

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForFunction(() => window.editor !== undefined);
+});
+test('CodeMirror initializes in source mode', async ({ page }) => {
+    await page.click('button.ck-source-editing-button');
+    const cm = await page.waitForSelector('.cm-wrapper');
+    expect(cm).not.toBeNull();
+});
+test('CodeMirror destroys when leaving source mode', async ({ page }) => {
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+    await page.click('button.ck-source-editing-button');
+    const exists = await page.$('.cm-wrapper');
+    expect(exists).toBeNull();
+});
+test('CodeMirror shows gutter when enabled', async ({ page }) => {
+    // Enter source editing mode
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+    // Assert gutter exists
+    const gutter = await page.locator('.cm-gutters').count();
+    expect(gutter).toBeGreaterThan(0);
+});
+test('CodeMirror renders formatted lines', async ({ page }) => {
+    // Enter source editing mode
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+    // Ensure CodeMirror content exists
+    await page.waitForSelector('.cm-content');
+    // Check that at least one formatted line exists
+    const lineCount = await page.locator('.cm-content .cm-line').count();
+    expect(lineCount).toBeGreaterThan(0);
+});
+test('CodeMirror syncs data back to CKEditor', async ({ page }) => {
+    // Enter source editing mode
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+    // Focus CodeMirror by clicking a real line
+    await page.locator('.cm-line').first().click();
+    // Insert a block CKEditor will preserve
+    await page.keyboard.type('<p>test</p>');
+    // Exit source editing mode
+    await page.click('button.ck-source-editing-button');
+    // Get CKEditor data
+    const data = await page.evaluate(() => window.editor.getData());
+    // Assert the update happened
+    expect(data).toContain('<p>test</p>');
+});

package/playwright/source-editing-code-mirror.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForFunction(() => window.editor !== undefined);
+});
+
+test('CodeMirror initializes in source mode', async ({ page }) => {
+    await page.click('button.ck-source-editing-button');
+
+    const cm = await page.waitForSelector('.cm-wrapper');
+    expect(cm).not.toBeNull();
+});
+
+test('CodeMirror destroys when leaving source mode', async ({ page }) => {
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+
+    await page.click('button.ck-source-editing-button');
+
+    const exists = await page.$('.cm-wrapper');
+    expect(exists).toBeNull();
+});
+
+test('CodeMirror shows gutter when enabled', async ({ page }) => {
+    // Enter source editing mode
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+
+    // Assert gutter exists
+    const gutter = await page.locator('.cm-gutters').count();
+    expect(gutter).toBeGreaterThan(0);
+});
+
+test('CodeMirror renders formatted lines', async ({ page }) => {
+    // Enter source editing mode
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+
+    // Ensure CodeMirror content exists
+    await page.waitForSelector('.cm-content');
+
+    // Check that at least one formatted line exists
+    const lineCount = await page.locator('.cm-content .cm-line').count();
+    expect(lineCount).toBeGreaterThan(0);
+});
+
+test('CodeMirror syncs data back to CKEditor', async ({ page }) => {
+    // Enter source editing mode
+    await page.click('button.ck-source-editing-button');
+    await page.waitForSelector('.cm-wrapper');
+
+    // Focus CodeMirror by clicking a real line
+    await page.locator('.cm-line').first().click();
+
+    // Insert a block CKEditor will preserve
+    await page.keyboard.type('<p>test</p>');
+
+    // Exit source editing mode
+    await page.click('button.ck-source-editing-button');
+
+    // Get CKEditor data
+    const data = await page.evaluate(() => window.editor.getData());
+
+    // Assert the update happened
+    expect(data).toContain('<p>test</p>');
+});

package/playwright.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from '@playwright/test';
+export default defineConfig({
+    testDir: './playwright',
+    use: {
+        headless: true,
+        viewport: { width: 1280, height: 800 }
+    },
+    webServer: {
+        command: 'npm run dev',
+        port: 5173,
+        reuseExistingServer: true
+    }
+});

package/playwright.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+    testDir: './playwright',
+    use: {
+        headless: true,
+        viewport: { width: 1280, height: 800 }
+    },
+    webServer: {
+        command: 'npm run dev',
+        port: 5173,
+        reuseExistingServer: true
+    }
+});

package/src/index.js

@@ -0,0 +1,3 @@
+import './sourceediting-codemirror.css';
+import SourceEditingCodeMirror from './sourceediting-codemirror';
+export default SourceEditingCodeMirror;

package/src/index.ts

@@ -0,0 +1,5 @@
+import './sourceediting-codemirror.css';
+import SourceEditingCodeMirror from './sourceediting-codemirror';
+
+export default SourceEditingCodeMirror;
+

package/src/sourceediting-codemirror.css

@@ -0,0 +1,18 @@
+.ck-source-editing-area .cm-editor {
+    border: 1px solid var(--ck-color-base-border);
+    border-radius: var(--ck-border-radius);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.ck-source-editing-area .cm-editor.cm-focused {
+    border-color: var(--ck-color-focus-border);
+    box-shadow: var(--ck-inner-shadow), 0 0;
+}
+
+/* Hide the area where SourceEditing puts its code content. */
+.ck-source-editing-area::after {
+    content: "";
+    display: none;
+}
+

package/src/sourceediting-codemirror.js

@@ -0,0 +1,114 @@
+import { Plugin } from 'ckeditor5';
+// CodeMirror 6 imports
+import { EditorView, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { html } from '@codemirror/lang-html';
+import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, indentUnit } from '@codemirror/language';
+import { indentSelection } from '@codemirror/commands';
+// Prettier 3 imports
+import prettier from "prettier/standalone";
+import * as prettierHtml from "prettier/plugins/html";
+import * as prettierCss from "prettier/plugins/postcss";
+import * as prettierTs from "prettier/plugins/typescript";
+import * as prettierMarkdown from "prettier/plugins/markdown";
+import * as prettierYaml from "prettier/plugins/yaml";
+export default class SourceEditingCodeMirror extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.view = null;
+    }
+    static get pluginName() {
+        return 'SourceEditingCodeMirror';
+    }
+    static get requires() {
+        return ['SourceEditing'];
+    }
+    // Prettier 3 formatter
+    async formatWithPrettier(code) {
+        return await prettier.format(code, {
+            parser: "html",
+            plugins: [
+                prettierHtml,
+                prettierCss,
+                prettierTs,
+                prettierMarkdown,
+                prettierYaml
+            ],
+            tabWidth: 4,
+            useTabs: false
+        });
+    }
+    // Listen to SourceEditing mode changes
+    afterInit() {
+        const editor = this.editor;
+        const sourceEditing = editor.plugins.get('SourceEditing');
+        this.listenTo(sourceEditing, 'change:isSourceEditingMode', async (_evt, _name, isOn) => {
+            if (isOn) {
+                await this.enableCodeMirror();
+            }
+            else {
+                this.disableCodeMirror();
+            }
+        });
+    }
+    // Enable CodeMirror with Prettier formatting
+    async enableCodeMirror() {
+        const editor = this.editor;
+        const sourceEditing = editor.plugins.get('SourceEditing');
+        // Sync CKEditor → source view
+        sourceEditing.updateEditorData();
+        // Format HTML using Prettier 3
+        const htmlData = await this.formatWithPrettier(editor.getData());
+        const container = document.querySelector('.ck-source-editing-area');
+        if (!container)
+            return;
+        const textarea = container.querySelector('textarea');
+        if (textarea)
+            textarea.style.display = 'none';
+        const cmDiv = document.createElement('div');
+        cmDiv.classList.add('cm-wrapper');
+        container.appendChild(cmDiv);
+        const cmExtensions = [
+            lineNumbers(),
+            highlightActiveLine(),
+            highlightActiveLineGutter(),
+            syntaxHighlighting(defaultHighlightStyle),
+            indentOnInput(),
+            indentUnit.of('    ')
+        ];
+        const config = editor.config.get('sourceEditingCodeMirror');
+        const extraExtensions = config?.extensions ?? [];
+        this.view = new EditorView({
+            state: EditorState.create({
+                doc: htmlData,
+                extensions: [
+                    ...cmExtensions,
+                    html(),
+                    ...extraExtensions,
+                    EditorView.updateListener.of(update => {
+                        if (update.docChanged) {
+                            editor.setData(update.state.doc.toString());
+                        }
+                    })
+                ]
+            }),
+            parent: cmDiv
+        });
+        // Select entire document
+        this.view.dispatch({
+            selection: { anchor: 0, head: this.view.state.doc.length }
+        });
+        // Indent entire document (after Prettier formatting)
+        indentSelection(this.view);
+    }
+    // Disable CodeMirror and show original textarea
+    disableCodeMirror() {
+        if (this.view) {
+            this.view.destroy();
+            this.view = null;
+        }
+        const textarea = document.querySelector('.ck-source-editing-area textarea');
+        if (textarea)
+            textarea.style.display = '';
+    }
+}