@kungal/editor-core 0.37.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. */
@@ -49,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. */
@@ -49,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) => {
@@ -194,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) {
@@ -211,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);
@@ -229,7 +238,8 @@ var createSpoilerPlugin = () => [
   spoilerSchema,
   insertSpoilerInputRule,
   insertKunSpoilerCommand,
-  remarkSpoilerPlugin
+  remarkSpoilerPlugin,
+  stripCaretAnchors
 ].flat();
 var hasMark = (state, type) => {
   if (!type) {