@llui/markdown-editor 0.2.13 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llui/markdown-editor",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,9 +24,6 @@
     "./styles/editor.css": "./dist/styles/editor.css"
   },
   "peerDependencies": {
-    "@llui/dom": "^0.11.5",
-    "@llui/lexical": "^0.2.8",
-    "@llui/components": "^0.12.2",
     "lexical": "^0.46.0",
     "@lexical/markdown": "^0.46.0",
     "@lexical/rich-text": "^0.46.0",
@@ -35,7 +32,11 @@
     "@lexical/table": "^0.46.0",
     "@lexical/selection": "^0.46.0",
     "@lexical/utils": "^0.46.0",
-    "@lexical/code-core": "^0.46.0"
+    "@lexical/code-core": "^0.46.0",
+    "@llui/dom": "^0.11.8",
+    "@llui/lexical": "^0.2.10",
+    "@llui/markdown": "^0.11.3",
+    "@llui/components": "^0.12.4"
   },
   "devDependencies": {
     "lexical": "^0.46.0",
@@ -50,9 +51,10 @@
     "typescript": "^6.0.0",
     "vitest": "^4.1.2",
     "@lexical/code-core": "^0.46.0",
-    "@llui/dom": "0.11.7",
-    "@llui/lexical": "0.2.9",
-    "@llui/components": "0.12.3"
+    "@llui/dom": "0.11.8",
+    "@llui/markdown": "0.11.3",
+    "@llui/components": "0.12.4",
+    "@llui/lexical": "0.2.10"
   },
   "sideEffects": [
     "./dist/styles/editor.css"

package/src/editor.ts

@@ -20,6 +20,7 @@ import {
 import { corePlugin } from './plugins/core.js'
 import { linkPlugin } from './plugins/link.js'
 import { registerMarkdownPaste } from './paste.js'
+import { registerLinkSanitizer } from './security.js'
 import { toolbar as renderToolbar } from './surfaces/toolbar.js'
 import type { CommandItem, MarkdownPlugin } from './plugins/types.js'
 import type { PluginUI } from './plugins/ui.js'
@@ -108,6 +109,15 @@ function defaultPlugins(): MarkdownPlugin[] {
   return [corePlugin(), linkPlugin()]
 }
 
+/** The per-mount `send` closure — the WeakMap key that ties a live editor to the
+ * one mount it belongs to. */
+type EditorSend = (msg: EditorMsg) => void
+
+/** Per-mount live state: the Lexical editor captured by that mount's `onReady`. */
+interface MountContext {
+  editor: LexicalEditor | null
+}
+
 /**
  * Build the markdown editor component. Embed it with `mountApp(el, markdownEditor(...))`
  * or compose it inside a larger component.
@@ -128,11 +138,23 @@ export function markdownEditor(
     .map((p) => ({ name: p.name, ui: p.ui }))
   const pluginUIByName = new Map(pluginUIs.map((p) => [p.name, p.ui]))
 
-  // The live editor, captured at mount; effects dispatch through it.
-  let editorRef: LexicalEditor | null = null
-  const getEditor = (): LexicalEditor | null => editorRef
+  // Per-MOUNT live-editor context, keyed by the mount's stable `send` closure —
+  // the SAME object the runtime hands to both `view` and `onEffect`. A single
+  // definition can be mounted more than once (or re-mounted); each mount gets its
+  // own editor reference here, so effects and plugin handlers dispatch to their
+  // own editor and unmount clears only that mount's reference (no cross-wiring,
+  // no leaked disposed editor). Entries are collected with their `send` key.
+  const mountContexts = new WeakMap<EditorSend, MountContext>()
+  const contextFor = (send: EditorSend): MountContext => {
+    let ctx = mountContexts.get(send)
+    if (!ctx) {
+      ctx = { editor: null }
+      mountContexts.set(send, ctx)
+    }
+    return ctx
+  }
 
-  const baseOnEffect = makeOnEffect(getEditor, itemsById, {
+  const baseOnEffect = makeOnEffect((api) => contextFor(api.send).editor, itemsById, {
     onChange: config.onChange,
     onFormatChange: config.onFormatChange,
     applyValue: (editor, value) =>
@@ -192,9 +214,10 @@ export function markdownEditor(
     api: { send: (msg: EditorMsg) => void; state: Signal<EditorState> },
   ): void => {
     if (effect.type === 'pluginEffect') {
+      const mount = contextFor(api.send)
       const ui = pluginUIByName.get(effect.name)
       ui?.onEffect?.(effect.effect, {
-        editor: getEditor,
+        editor: () => mount.editor,
         send: (msg) => api.send({ type: 'plugin', name: effect.name, msg }),
         emit: (msg) => api.send(msg as EditorMsg),
       })
@@ -210,6 +233,10 @@ export function markdownEditor(
     state: Signal<EditorState>
     send: (msg: EditorMsg) => void
   }): Renderable => {
+    // This mount's live-editor slot (keyed by this mount's `send`). `onReady`
+    // fills it; effects/plugins read it through `contextFor(api.send)`.
+    const mount = contextFor(send)
+
     // Build the collab binding (once, at mount) from the consumer's factory,
     // injecting the markdown seed + status sinks that mirror into `state.collab`.
     const collabBinding: CollabBinding | null = config.collab
@@ -245,17 +272,26 @@ export function markdownEditor(
         ? { changeDebounceMs: config.changeDebounceMs }
         : {}),
       register: (editor) => {
-        const disposers = [registerMarkdownShortcuts(editor, transformers)]
+        const disposers = [
+          registerMarkdownShortcuts(editor, transformers),
+          // Global scheme allowlist for links: the single backstop covering the
+          // link dialog, pasted/imported markdown, and the typed `[x](url)`
+          // shortcut. Image src is enforced in the image transformer.
+          registerLinkSanitizer(editor),
+        ]
         if (config.pasteMarkdown !== false)
           disposers.push(registerMarkdownPaste(editor, transformers))
         if (decorators.length > 0) disposers.push(registerDecoratorBridges(editor, decorators))
         if (collabBinding) disposers.push(collabBinding.register(editor))
         return () => {
           for (const dispose of disposers) dispose()
+          // Release this mount's editor reference so a disposed editor never
+          // leaks and stale effects can't reach a torn-down editor.
+          mount.editor = null
         }
       },
       onReady: (editor) => {
-        editorRef = editor
+        mount.editor = editor
         if (config.placeholder) {
           editor.getRootElement()?.setAttribute('data-placeholder', config.placeholder)
         }
@@ -278,7 +314,7 @@ export function markdownEditor(
       const rendered = ui.view({
         state: state.at(`plugins.${name}`),
         send: (msg) => send({ type: 'plugin', name, msg }),
-        editor: getEditor,
+        editor: () => mount.editor,
       })
       return Array.isArray(rendered) ? rendered : [rendered]
     })

package/src/effects.ts

@@ -18,23 +18,25 @@ export interface EffectConfig {
   applyValue: (editor: LexicalEditor, value: string) => void
 }
 
-/** Build the component's `onEffect`. `getEditor` returns the live editor (set at
- * mount via the foreign `onReady`); `items` is the merged id → command map. */
+/** Build the component's `onEffect`. `resolveEditor` maps the per-mount effect
+ * `api` (whose `send` identifies the mount) to that mount's live editor — so two
+ * mounts of one definition dispatch to their own editors; `items` is the merged
+ * id → command map. */
 export function makeOnEffect(
-  getEditor: () => LexicalEditor | null,
+  resolveEditor: (api: EffectApi) => LexicalEditor | null,
   items: ReadonlyMap<string, CommandItem>,
   config: EffectConfig,
 ): (effect: EditorEffect, api: EffectApi) => void {
   return (effect, api) => {
     switch (effect.type) {
       case 'execCommand': {
-        const editor = getEditor()
+        const editor = resolveEditor(api)
         const item = items.get(effect.id)
         if (editor && item) item.run(editor, { send: api.send })
         return
       }
       case 'applyValue': {
-        const editor = getEditor()
+        const editor = resolveEditor(api)
         if (editor) config.applyValue(editor, effect.value)
         return
       }

package/src/paste.ts

@@ -17,6 +17,7 @@ import {
   type LexicalEditor,
 } from 'lexical'
 import { $convertFromMarkdownString, type Transformer } from '@lexical/markdown'
+import { $sanitizeLinkNodes } from './security.js'
 
 /**
  * Parse `markdown` with `transformers` and insert the produced nodes at the
@@ -40,6 +41,10 @@ export function $insertMarkdownAtSelection(
   // touches the scratch node, not the live document.
   const scratch = $createParagraphNode()
   $convertFromMarkdownString(markdown, transformers, scratch)
+  // Untrusted source: neutralize any `javascript:`/`data:` link the markdown
+  // carried BEFORE the nodes are spliced into the live document. (Image src is
+  // enforced in the image transformer; links go through here.)
+  $sanitizeLinkNodes(scratch)
   const nodes = scratch.getChildren()
   if (nodes.length === 0) return false
 

package/src/plugins/callout.ts

@@ -12,7 +12,7 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { button, component, div, span, text, type Signal } from '@llui/dom'
+import { button, div, span, text, type Signal } from '@llui/dom'
 import type { MarkdownPlugin } from './types.js'
 
 export type CalloutKind = 'note' | 'tip' | 'warning' | 'danger'
@@ -46,71 +46,56 @@ function isCalloutData(value: unknown): value is CalloutData {
   )
 }
 
-type CalloutMsg = { type: 'cycle' } | { type: 'commitText'; text: string }
-
 // Keep keyboard/input/paste events from bubbling to the outer Lexical editor so
 // the nested editable text island edits natively without Lexical intercepting.
 const stop = (e: Event): void => e.stopPropagation()
 
 /** The LLui sub-view rendered inside a callout DecoratorNode. The badge cycles
  * the kind; the text is an editable island that persists into the Lexical node
- * on blur (both round-trip to markdown). */
-const calloutBridge = decoratorBridge<CalloutData, CalloutData, CalloutMsg, never>(
-  BRIDGE_TYPE,
-  (data, api) =>
-    component<CalloutData, CalloutMsg, never>({
-      name: 'Callout',
-      init: () => ({ kind: data.kind, text: data.text }),
-      update: (state, msg) => {
-        if (msg.type === 'cycle') {
-          const kind = nextKind(state.kind)
-          api.update({ kind, text: state.text })
-          return { ...state, kind }
-        }
-        if (msg.type === 'commitText') {
-          if (msg.text === state.text) return state
-          api.update({ kind: state.kind, text: msg.text })
-          return { ...state, text: msg.text }
-        }
-        return state
-      },
-      view: ({ state, send }) => [
-        div(
-          {
-            'data-scope': 'md-callout',
-            'data-part': 'root',
-            'data-kind': state.at('kind') as Signal<string>,
-            contenteditable: 'false',
-            onKeyDown: stop,
-            onBeforeInput: stop,
-            onPaste: stop,
+ * on blur (both round-trip to markdown). `data` is a reactive signal fed by the
+ * bridge, so a data commit updates the view IN PLACE — the editable island keeps
+ * its focus/caret instead of the whole sub-app remounting. */
+const calloutBridge = decoratorBridge<CalloutData>(BRIDGE_TYPE, (data, api) => [
+  div(
+    {
+      'data-scope': 'md-callout',
+      'data-part': 'root',
+      'data-kind': data.at('kind') as Signal<string>,
+      contenteditable: 'false',
+      onKeyDown: stop,
+      onBeforeInput: stop,
+      onPaste: stop,
+    },
+    [
+      button(
+        {
+          type: 'button',
+          'data-part': 'badge',
+          'aria-label': 'Change callout kind',
+          onClick: () => {
+            const cur = data.peek()
+            api.update({ kind: nextKind(cur.kind), text: cur.text })
+          },
+        },
+        [text(data.at('kind').map((k) => KIND_LABEL[k]))],
+      ),
+      span(
+        {
+          'data-part': 'text',
+          contenteditable: 'true',
+          role: 'textbox',
+          'aria-label': 'Callout text',
+          onBlur: (e: FocusEvent) => {
+            const cur = data.peek()
+            const value = (e.target as HTMLElement).textContent ?? ''
+            if (value !== cur.text) api.update({ kind: cur.kind, text: value })
           },
-          [
-            button(
-              {
-                type: 'button',
-                'data-part': 'badge',
-                'aria-label': 'Change callout kind',
-                onClick: () => send({ type: 'cycle' }),
-              },
-              [text(state.at('kind').map((k) => KIND_LABEL[k]))],
-            ),
-            span(
-              {
-                'data-part': 'text',
-                contenteditable: 'true',
-                role: 'textbox',
-                'aria-label': 'Callout text',
-                onBlur: (e: FocusEvent) =>
-                  send({ type: 'commitText', text: (e.target as HTMLElement).textContent ?? '' }),
-              },
-              [text(state.at('text') as Signal<string>)],
-            ),
-          ],
-        ),
-      ],
-    }),
-)
+        },
+        [text(data.at('text') as Signal<string>)],
+      ),
+    ],
+  ),
+])
 
 /** `:::kind text` element transformer (single-line admonition). */
 const CALLOUT_TRANSFORMER: ElementTransformer = {

package/src/plugins/hr.ts

@@ -10,24 +10,14 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { component, hr } from '@llui/dom'
+import { hr } from '@llui/dom'
 import type { MarkdownPlugin } from './types.js'
 
 const BRIDGE_TYPE = 'hr'
 
-const hrBridge = decoratorBridge<
-  Record<string, never>,
-  Record<string, never>,
-  { type: 'noop' },
-  never
->(BRIDGE_TYPE, () =>
-  component<Record<string, never>, { type: 'noop' }, never>({
-    name: 'HorizontalRule',
-    init: () => ({}),
-    update: (state) => state,
-    view: () => [hr({ 'data-md-hr': '', contenteditable: 'false' })],
-  }),
-)
+const hrBridge = decoratorBridge<Record<string, never>>(BRIDGE_TYPE, () => [
+  hr({ 'data-md-hr': '', contenteditable: 'false' }),
+])
 
 const HR_TRANSFORMER: ElementTransformer = {
   dependencies: [LLuiDecoratorNode],

package/src/plugins/image.ts

@@ -8,6 +8,7 @@ import {
   $setSelection,
   type BaseSelection,
   type ElementNode,
+  type LexicalEditor,
   type LexicalNode,
 } from 'lexical'
 import { $insertNodeToNearestRoot } from '@lexical/utils'
@@ -18,12 +19,13 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { button, component, div, img, input, text, type Signal } from '@llui/dom'
+import { button, div, img, input, text, type Signal } from '@llui/dom'
 import {
   connect as connectDialog,
   overlay as overlayDialog,
   type DialogMsg,
 } from '@llui/components/dialog'
+import { sanitizeImageUrl } from '../security.js'
 import { definePluginUI } from './ui.js'
 import type { MarkdownPlugin } from './types.js'
 
@@ -43,20 +45,11 @@ function isImageData(value: unknown): value is ImageData {
   )
 }
 
-const imageBridge = decoratorBridge<ImageData, ImageData, { type: 'noop' }, never>(
-  BRIDGE_TYPE,
-  (data) =>
-    component<ImageData, { type: 'noop' }, never>({
-      name: 'Image',
-      init: () => ({ src: data.src, alt: data.alt }),
-      update: (state) => state,
-      view: ({ state }) => [
-        div({ 'data-scope': 'md-image', 'data-part': 'root', contenteditable: 'false' }, [
-          img({ src: state.at('src') as Signal<string>, alt: state.at('alt') as Signal<string> }),
-        ]),
-      ],
-    }),
-)
+const imageBridge = decoratorBridge<ImageData>(BRIDGE_TYPE, (data) => [
+  div({ 'data-scope': 'md-image', 'data-part': 'root', contenteditable: 'false' }, [
+    img({ src: data.at('src') as Signal<string>, alt: data.at('alt') as Signal<string> }),
+  ]),
+])
 
 const IMAGE_TRANSFORMER: ElementTransformer = {
   dependencies: [LLuiDecoratorNode],
@@ -67,9 +60,12 @@ const IMAGE_TRANSFORMER: ElementTransformer = {
   },
   regExp: /^!\[([^\]]*)\]\(([^)]+)\)$/,
   replace: (parentNode: ElementNode, _children, match): void => {
-    parentNode.replace(
-      $createLLuiDecoratorNode(BRIDGE_TYPE, { alt: match[1] ?? '', src: match[2] ?? '' }),
-    )
+    // Enforce the image-src allowlist on import/paste: a disallowed scheme
+    // (e.g. `javascript:`) sanitizes to null → drop the image entirely rather
+    // than materialize a decorator node bound to an unsafe src.
+    const src = sanitizeImageUrl(match[2] ?? '')
+    if (src === null) return
+    parentNode.replace($createLLuiDecoratorNode(BRIDGE_TYPE, { alt: match[1] ?? '', src }))
   },
   type: 'element',
 }
@@ -112,7 +108,9 @@ export interface ImagePluginOptions {
 }
 
 export function imagePlugin(opts: ImagePluginOptions = {}): MarkdownPlugin {
-  let savedSelection: BaseSelection | null = null
+  // Keyed by the per-mount editor so two mounts never cross-wire the selection
+  // saved while the insert dialog is open.
+  const savedSelection = new WeakMap<LexicalEditor, BaseSelection | null>()
 
   return {
     name: 'image',
@@ -217,20 +215,25 @@ export function imagePlugin(opts: ImagePluginOptions = {}): MarkdownPlugin {
         const editor = ctx.editor()
         if (!editor) return
         if (effect.type === 'begin') {
-          savedSelection = editor.getEditorState().read(() => {
-            const selection = $getSelection()
-            return selection ? selection.clone() : null
-          })
+          savedSelection.set(
+            editor,
+            editor.getEditorState().read(() => {
+              const selection = $getSelection()
+              return selection ? selection.clone() : null
+            }),
+          )
           return
         }
-        if (effect.src.trim() === '') return
+        // Enforce the image-src allowlist at insert: a disallowed scheme drops
+        // the insertion rather than binding the decorator to an unsafe src.
+        const src = sanitizeImageUrl(effect.src.trim())
+        if (src === null) return
+        const saved = savedSelection.get(editor) ?? null
         editor.update(() => {
-          if (savedSelection) $setSelection(savedSelection.clone())
-          $insertNodeToNearestRoot(
-            $createLLuiDecoratorNode(BRIDGE_TYPE, { src: effect.src.trim(), alt: effect.alt }),
-          )
+          if (saved) $setSelection(saved.clone())
+          $insertNodeToNearestRoot($createLLuiDecoratorNode(BRIDGE_TYPE, { src, alt: effect.alt }))
         })
-        savedSelection = null
+        savedSelection.delete(editor)
       },
     }),
   }

package/src/plugins/link.ts

@@ -14,6 +14,7 @@ import { $findMatchingParent } from '@lexical/utils'
 import { $isLinkNode, $toggleLink } from '@lexical/link'
 import type { DialogMsg, DialogState } from '@llui/components/dialog'
 import { linkDialog } from '../surfaces/link-dialog.js'
+import { sanitizeLinkUrl } from '../security.js'
 import { definePluginUI } from './ui.js'
 import type { CommandItem, MarkdownPlugin } from './types.js'
 
@@ -66,8 +67,9 @@ export interface LinkPluginOptions {
 
 export function linkPlugin(opts: LinkPluginOptions = {}): MarkdownPlugin {
   // Selection saved when the dialog opens (the modal steals focus/selection),
-  // restored on commit. Encapsulated in the plugin instance — not the core editor.
-  let savedSelection: BaseSelection | null = null
+  // restored on commit. Keyed by the per-mount editor so two mounts of the same
+  // plugin instance never cross-wire their saved selection.
+  const savedSelection = new WeakMap<LexicalEditor, BaseSelection | null>()
 
   const item: CommandItem = {
     id: 'link',
@@ -114,19 +116,27 @@ export function linkPlugin(opts: LinkPluginOptions = {}): MarkdownPlugin {
         const editor = ctx.editor()
         if (!editor) return
         if (effect.type === 'begin') {
-          savedSelection = editor.getEditorState().read(() => {
-            const selection = $getSelection()
-            return selection ? selection.clone() : null
-          })
+          savedSelection.set(
+            editor,
+            editor.getEditorState().read(() => {
+              const selection = $getSelection()
+              return selection ? selection.clone() : null
+            }),
+          )
           ctx.send({ type: 'show', url: readLinkUrl(editor) })
           return
         }
-        const url = effect.url.trim()
+        // Enforce the URL-scheme allowlist at commit: a `javascript:`/`data:`
+        // href sanitizes to null → no link is created (unlink). The global
+        // LinkNode transform is the backstop, but blocking here avoids ever
+        // materializing the unsafe link.
+        const safe = sanitizeLinkUrl(effect.url.trim())
+        const saved = savedSelection.get(editor) ?? null
         editor.update(() => {
-          if (savedSelection) $setSelection(savedSelection.clone())
-          $toggleLink(url === '' ? null : url)
+          if (saved) $setSelection(saved.clone())
+          $toggleLink(safe === null || safe === '' ? null : safe)
         })
-        savedSelection = null
+        savedSelection.delete(editor)
       },
     }),
   }

package/src/plugins/math.ts

@@ -11,7 +11,7 @@ import {
   LLuiDecoratorNode,
   decoratorBridge,
 } from '@llui/lexical'
-import { component, div, span, text, type Mountable, type Signal } from '@llui/dom'
+import { div, span, text, type Mountable, type Signal } from '@llui/dom'
 import type { MarkdownPlugin } from './types.js'
 import { renderedPreview, type PreviewRender } from './_preview.js'
 
@@ -25,8 +25,6 @@ function isMathData(value: unknown): value is MathData {
   return typeof value === 'object' && value !== null && typeof (value as MathData).tex === 'string'
 }
 
-type MathMsg = { type: 'commit'; tex: string }
-
 const stop = (e: Event): void => e.stopPropagation()
 
 export interface MathPluginOptions {
@@ -40,44 +38,32 @@ export interface MathPluginOptions {
 }
 
 export function mathPlugin(opts: MathPluginOptions = {}): MarkdownPlugin {
-  const bridge = decoratorBridge<MathData, MathData, MathMsg, never>(BRIDGE_TYPE, (data, api) =>
-    component<MathData, MathMsg, never>({
-      name: 'Math',
-      init: () => ({ tex: data.tex }),
-      update: (state, msg) => {
-        if (msg.type === 'commit') {
-          if (msg.tex === state.tex) return state
-          api.update({ tex: msg.tex })
-          return { tex: msg.tex }
-        }
-        return state
-      },
-      view: ({ state, send }) => {
-        const children: Mountable[] = [
-          span(
-            {
-              'data-part': 'source',
-              contenteditable: 'true',
-              role: 'textbox',
-              'aria-label': 'TeX source',
-              onKeyDown: stop,
-              onBeforeInput: stop,
-              onPaste: stop,
-              onBlur: (e: FocusEvent) =>
-                send({ type: 'commit', tex: (e.target as HTMLElement).textContent ?? '' }),
-            },
-            [text(state.at('tex') as Signal<string>)],
-          ),
-        ]
-        if (opts.render) {
-          children.push(renderedPreview(state.at('tex') as Signal<string>, opts.render, 'span'))
-        }
-        return [
-          div({ 'data-scope': 'md-math', 'data-part': 'root', contenteditable: 'false' }, children),
-        ]
-      },
-    }),
-  )
+  const bridge = decoratorBridge<MathData>(BRIDGE_TYPE, (data, api) => {
+    const children: Mountable[] = [
+      span(
+        {
+          'data-part': 'source',
+          contenteditable: 'true',
+          role: 'textbox',
+          'aria-label': 'TeX source',
+          onKeyDown: stop,
+          onBeforeInput: stop,
+          onPaste: stop,
+          onBlur: (e: FocusEvent) => {
+            const tex = (e.target as HTMLElement).textContent ?? ''
+            if (tex !== data.peek().tex) api.update({ tex })
+          },
+        },
+        [text(data.at('tex') as Signal<string>)],
+      ),
+    ]
+    if (opts.render) {
+      children.push(renderedPreview(data.at('tex') as Signal<string>, opts.render, 'span'))
+    }
+    return [
+      div({ 'data-scope': 'md-math', 'data-part': 'root', contenteditable: 'false' }, children),
+    ]
+  })
 
   const transformer: ElementTransformer = {
     dependencies: [LLuiDecoratorNode],