@kungal/editor-core 0.36.0 → 0.38.0

package/dist/preset/index.d.cts

@@ -7,8 +7,27 @@ import { Uploader } from '@milkdown/kit/plugin/upload';
 import { Decoration, EditorView } from '@milkdown/kit/prose/view';
 import { HighlightStyle } from '@codemirror/language';
 
-/** DOM attrs for the rendered spoiler chip. The styling references KunUI CSS
- * variables so it inherits the host theme (the render layer ships the vars). */
+/**
+ * DOM attrs for the spoiler chip AS SEEN WHILE EDITING — a tinted chip, so you
+ * can tell hidden text from ordinary text while you write it. (The published
+ * page renders `||…||` itself; this styling never leaves the editor.)
+ *
+ * Self-sufficient on purpose: it used to be `background: var(--color-default-500)`
+ * with no fallback, so in any host that does not define that palette token — the
+ * headless editor being exactly such a host — the whole declaration was invalid
+ * and the chip computed to `rgba(0, 0, 0, 0)`. Hidden text looked like plain text.
+ *
+ * `--kun-spoiler-bg` is the theming hook: an INLINE style beats every selector a
+ * host stylesheet can write, so without a custom property the chip would be
+ * untouchable from CSS. Setting the property is not (a rule may set it on
+ * `.kun-spoiler` freely) — which is how @kungal/editor-nuxt paints it in KunUI
+ * colors, and how any host re-tints it in one line.
+ *
+ * The default is `currentColor`-derived rather than a fixed grey so it works on a
+ * light and a dark background alike; the plain rgba before it is what a browser
+ * without `color-mix()` keeps (an unknown function is dropped at parse time, so
+ * the earlier declaration survives — unlike a bad `var()`, which kills both).
+ */
 declare const spoilerAttr: _milkdown_kit_utils.$NodeAttr;
 /** The `kun-spoiler` inline node: parses/serializes `||text||` and renders a
  * `<span data-type="kun-spoiler">` the render layer toggles on click. */
@@ -21,7 +40,9 @@ declare const spoilerSchema: _milkdown_kit_utils.$NodeSchema<"kun-spoiler">;
  * - a selection → its TEXT moves INSIDE the node. It has to be moved, not
  *   replaced: `replaceSelectionWith` on its own deletes what you selected. The
  *   schema is `marks: ''` (bold inside `||…||` cannot round-trip), so the
- *   formatting is what's dropped, never the words.
+ *   formatting is what's dropped, never the words. Line breaks become spaces:
+ *   `||…||` pairs within one line in every reader of the syntax, so a spoiler
+ *   spanning lines would serialize to markdown that reads back as literal `||`.
  * - an empty selection → an empty spoiler with the caret inside it: type, and
  *   what you type is hidden. "Empty" means holding a caret anchor — a caret
  *   cannot sit in an inline node with no text node in it — and a spoiler with
@@ -32,10 +53,11 @@ declare const spoilerSchema: _milkdown_kit_utils.$NodeSchema<"kun-spoiler">;
  *   all, so this button has to toggle.
  *
  * Returns false where there is nothing to hide or nowhere to put it — inside a
- * code block, or with a NODE selected (an image is not text; replacing it would
- * delete it) — so a host can grey the button out. A spoiler holds text, so any
- * other inline node caught in a text selection (an image, inline math) does not
- * survive the move: `||…||` cannot carry one.
+ * code block, with a NODE selected, or over a selection holding no words at all
+ * (an image is not text; replacing it would delete it) — so a host can grey the
+ * button out. A spoiler holds text, so any other inline node caught in a text
+ * selection alongside words (an image, inline math) does not survive the move:
+ * `||…||` cannot carry one.
  */
 declare const insertKunSpoilerCommand: _milkdown_kit_utils.$Command<unknown>;
 /** Typing `||text||` in the editor turns it into a spoiler node in place. The
@@ -46,7 +68,8 @@ declare const insertSpoilerInputRule: _milkdown_kit_utils.$InputRule;
 declare const remarkSpoilerPlugin: _milkdown_kit_utils.$Remark<"remarkSpoiler", unknown>;
 /**
  * The spoiler plugin bundle: schema attrs, node schema, the `||…||` input rule,
- * the insert command and the remark round-trip. Pure — no adapter needed.
+ * the insert command, the remark round-trip and the serializer guard that keeps
+ * caret anchors out of the markdown. Pure — no adapter needed.
  */
 declare const createSpoilerPlugin: () => MilkdownPlugin[];
 

package/dist/preset/index.d.ts

@@ -7,8 +7,27 @@ import { Uploader } from '@milkdown/kit/plugin/upload';
 import { Decoration, EditorView } from '@milkdown/kit/prose/view';
 import { HighlightStyle } from '@codemirror/language';
 
-/** DOM attrs for the rendered spoiler chip. The styling references KunUI CSS
- * variables so it inherits the host theme (the render layer ships the vars). */
+/**
+ * DOM attrs for the spoiler chip AS SEEN WHILE EDITING — a tinted chip, so you
+ * can tell hidden text from ordinary text while you write it. (The published
+ * page renders `||…||` itself; this styling never leaves the editor.)
+ *
+ * Self-sufficient on purpose: it used to be `background: var(--color-default-500)`
+ * with no fallback, so in any host that does not define that palette token — the
+ * headless editor being exactly such a host — the whole declaration was invalid
+ * and the chip computed to `rgba(0, 0, 0, 0)`. Hidden text looked like plain text.
+ *
+ * `--kun-spoiler-bg` is the theming hook: an INLINE style beats every selector a
+ * host stylesheet can write, so without a custom property the chip would be
+ * untouchable from CSS. Setting the property is not (a rule may set it on
+ * `.kun-spoiler` freely) — which is how @kungal/editor-nuxt paints it in KunUI
+ * colors, and how any host re-tints it in one line.
+ *
+ * The default is `currentColor`-derived rather than a fixed grey so it works on a
+ * light and a dark background alike; the plain rgba before it is what a browser
+ * without `color-mix()` keeps (an unknown function is dropped at parse time, so
+ * the earlier declaration survives — unlike a bad `var()`, which kills both).
+ */
 declare const spoilerAttr: _milkdown_kit_utils.$NodeAttr;
 /** The `kun-spoiler` inline node: parses/serializes `||text||` and renders a
  * `<span data-type="kun-spoiler">` the render layer toggles on click. */
@@ -21,7 +40,9 @@ declare const spoilerSchema: _milkdown_kit_utils.$NodeSchema<"kun-spoiler">;
  * - a selection → its TEXT moves INSIDE the node. It has to be moved, not
  *   replaced: `replaceSelectionWith` on its own deletes what you selected. The
  *   schema is `marks: ''` (bold inside `||…||` cannot round-trip), so the
- *   formatting is what's dropped, never the words.
+ *   formatting is what's dropped, never the words. Line breaks become spaces:
+ *   `||…||` pairs within one line in every reader of the syntax, so a spoiler
+ *   spanning lines would serialize to markdown that reads back as literal `||`.
  * - an empty selection → an empty spoiler with the caret inside it: type, and
  *   what you type is hidden. "Empty" means holding a caret anchor — a caret
  *   cannot sit in an inline node with no text node in it — and a spoiler with
@@ -32,10 +53,11 @@ declare const spoilerSchema: _milkdown_kit_utils.$NodeSchema<"kun-spoiler">;
  *   all, so this button has to toggle.
  *
  * Returns false where there is nothing to hide or nowhere to put it — inside a
- * code block, or with a NODE selected (an image is not text; replacing it would
- * delete it) — so a host can grey the button out. A spoiler holds text, so any
- * other inline node caught in a text selection (an image, inline math) does not
- * survive the move: `||…||` cannot carry one.
+ * code block, with a NODE selected, or over a selection holding no words at all
+ * (an image is not text; replacing it would delete it) — so a host can grey the
+ * button out. A spoiler holds text, so any other inline node caught in a text
+ * selection alongside words (an image, inline math) does not survive the move:
+ * `||…||` cannot carry one.
  */
 declare const insertKunSpoilerCommand: _milkdown_kit_utils.$Command<unknown>;
 /** Typing `||text||` in the editor turns it into a spoiler node in place. The
@@ -46,7 +68,8 @@ declare const insertSpoilerInputRule: _milkdown_kit_utils.$InputRule;
 declare const remarkSpoilerPlugin: _milkdown_kit_utils.$Remark<"remarkSpoiler", unknown>;
 /**
  * The spoiler plugin bundle: schema attrs, node schema, the `||…||` input rule,
- * the insert command and the remark round-trip. Pure — no adapter needed.
+ * the insert command, the remark round-trip and the serializer guard that keeps
+ * caret anchors out of the markdown. Pure — no adapter needed.
  */
 declare const createSpoilerPlugin: () => MilkdownPlugin[];
 

package/dist/preset/index.js

@@ -6,13 +6,13 @@ import { listener } from '@milkdown/kit/plugin/listener';
 import { clipboard } from '@milkdown/kit/plugin/clipboard';
 import { indent } from '@milkdown/kit/plugin/indent';
 import { trailing } from '@milkdown/kit/plugin/trailing';
+import { commandsCtx, editorViewOptionsCtx, SerializerReady, serializerCtx } from '@milkdown/kit/core';
 import { Fragment } from '@milkdown/kit/prose/model';
 import { expectDomTypeError } from '@milkdown/kit/exception';
 import { InputRule, textblockTypeInputRule } from '@milkdown/kit/prose/inputrules';
 import { TextSelection, NodeSelection, PluginKey, Plugin } from '@milkdown/kit/prose/state';
 import { $nodeAttr, $nodeSchema, $command, $inputRule, $remark, $useKeymap, $prose } from '@milkdown/kit/utils';
 import { visit } from 'unist-util-visit';
-import { commandsCtx, editorViewOptionsCtx } from '@milkdown/kit/core';
 import { setBlockType } from '@milkdown/kit/prose/commands';
 import { findNodeInSelection, nodeRule } from '@milkdown/kit/prose';
 import katex from 'katex';
@@ -30,10 +30,17 @@ import { DecorationSet, Decoration } from '@milkdown/kit/prose/view';
 var spoilerAttr = $nodeAttr("kun-spoiler", () => ({
   container: {
     class: "kun-spoiler",
-    style: "background: var(--color-default-500); border-radius: var(--radius-sm); padding: 0 4px; cursor: pointer;"
+    style: "background: rgba(127, 127, 127, 0.3); background: var(--kun-spoiler-bg, color-mix(in oklab, currentColor 22%, transparent)); border-radius: var(--radius-sm, 0.25rem); padding: 0 4px; cursor: pointer;"
   }
 }));
 var CARET_ANCHOR = "\u200B";
+var stripCaretAnchors = (ctx) => async () => {
+  await ctx.wait(SerializerReady);
+  ctx.update(
+    serializerCtx,
+    (serialize) => (doc) => serialize(doc).replaceAll(CARET_ANCHOR, "")
+  );
+};
 var withoutAnchors = (content) => {
   const kept = [];
   content.forEach((child) => {
@@ -144,10 +151,13 @@ var insertKunSpoilerCommand = $command(
     if ($from.parent.isTextblock && !$from.parent.canReplaceWith($from.index(), $from.index(), type)) {
       return false;
     }
+    const text = state.doc.textBetween(from, to, " ", " ").replaceAll(CARET_ANCHOR, "");
+    if (!empty && !text.trim()) {
+      return false;
+    }
     if (!dispatch) {
       return true;
     }
-    const text = state.doc.textBetween(from, to, " ").replaceAll(CARET_ANCHOR, "");
     const node = type.create(null, state.schema.text(text || CARET_ANCHOR));
     const tr = state.tr.replaceSelectionWith(node, false);
     const after = tr.selection.to;
@@ -191,16 +201,17 @@ var remarkSpoilerPlugin = $remark("remarkSpoiler", () => () => {
       if (!node.value.includes("||")) {
         return;
       }
+      const value = node.value.replaceAll(CARET_ANCHOR, "");
       const regex = /\|\|(.*?)\|\|/g;
       const newNodes = [];
       let lastIndex = 0;
-      for (const match of node.value.matchAll(regex)) {
+      for (const match of value.matchAll(regex)) {
         const [full, content] = match;
         const matchIndex = match.index ?? 0;
         if (matchIndex > lastIndex) {
           newNodes.push({
             type: "text",
-            value: node.value.slice(lastIndex, matchIndex)
+            value: value.slice(lastIndex, matchIndex)
           });
         }
         if (content) {
@@ -208,11 +219,12 @@ var remarkSpoilerPlugin = $remark("remarkSpoiler", () => () => {
             type: "kun-spoiler",
             children: [{ type: "text", value: content }]
           });
+          newNodes.push({ type: "text", value: CARET_ANCHOR });
         }
         lastIndex = matchIndex + full.length;
       }
-      if (lastIndex < node.value.length) {
-        newNodes.push({ type: "text", value: node.value.slice(lastIndex) });
+      if (lastIndex < value.length) {
+        newNodes.push({ type: "text", value: value.slice(lastIndex) });
       }
       if (newNodes.length > 0 && typeof index === "number") {
         parent.children?.splice(index, 1, ...newNodes);
@@ -226,7 +238,8 @@ var createSpoilerPlugin = () => [
   spoilerSchema,
   insertSpoilerInputRule,
   insertKunSpoilerCommand,
-  remarkSpoilerPlugin
+  remarkSpoilerPlugin,
+  stripCaretAnchors
 ].flat();
 var hasMark = (state, type) => {
   if (!type) {