@byline/richtext-lexical 0.9.3

package/src/field/nodes/admonition-node/admonition-node-component.tsx

@@ -0,0 +1,256 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type * as React from 'react'
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
+import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer'
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection'
+import { mergeRegister } from '@lexical/utils'
+import cx from 'classnames'
+import type { BaseSelection, LexicalEditor, NodeKey, NodeSelection, RangeSelection } from 'lexical'
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isNodeSelection,
+  $setSelection,
+  COMMAND_PRIORITY_LOW,
+  KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+} from 'lexical'
+
+import { useEditorConfig } from '../../config/editor-config-context'
+// import { LinkPlugin } from '../../plugins/link-plugin/link'
+// import { FloatingLinkEditorPlugin } from '../../plugins/link-plugin/link/floating-link-editor'
+import { ContentEditable } from '../../content-editable'
+import { useSharedHistoryContext } from '../../context/shared-history-context'
+import { useSharedOnChange } from '../../context/shared-on-change-context'
+import { AdmonitionModal } from '../../plugins/admonition-plugin/admonition-modal'
+import { Placeholder } from '../../ui/placeholder'
+import { $isAdmonitionNode } from './admonition-node'
+import { DangerIcon, NoteIcon, TipIcon, WarningIcon } from './icons'
+import type { AdmonitionData } from '../../plugins/admonition-plugin/types'
+import type { AdmonitionNode } from './admonition-node'
+import type { AdmonitionAttributes, AdmonitionType } from './types'
+
+import './admonition-node-component.css'
+
+const icons = {
+  note: NoteIcon,
+  tip: TipIcon,
+  warning: WarningIcon,
+  danger: DangerIcon,
+}
+
+export default function AdmonitionNodeComponent({
+  admonitionType,
+  title,
+  content,
+  nodeKey,
+}: {
+  admonitionType: AdmonitionType
+  title: string
+  content: LexicalEditor
+  nodeKey: NodeKey
+}): React.JSX.Element {
+  const [open, setOpen] = useState(false)
+  const [editor] = useLexicalComposerContext()
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const { historyState } = useSharedHistoryContext()
+  const [isSelected, setSelected, _clearSelection] = useLexicalNodeSelection(nodeKey)
+  const [selection, setSelection] = useState<RangeSelection | NodeSelection | BaseSelection | null>(
+    null
+  )
+  const { uuid } = useEditorConfig()
+  const { onChange } = useSharedOnChange()
+  const editorState = editor.getEditorState()
+  const activeEditorRef = useRef<LexicalEditor | null>(null)
+  const node = editorState.read(() => $getNodeByKey(nodeKey) as AdmonitionNode)
+
+  const onDelete = useCallback(
+    (payload: KeyboardEvent) => {
+      if (isSelected && $isNodeSelection($getSelection())) {
+        const event: KeyboardEvent = payload
+        event.preventDefault()
+        const node = $getNodeByKey(nodeKey)
+        if ($isAdmonitionNode(node)) {
+          node?.remove()
+        }
+        setSelected(false)
+      }
+      return false
+    },
+    [isSelected, nodeKey, setSelected]
+  )
+
+  const onEnter = useCallback(
+    (event: KeyboardEvent) => {
+      const latestSelection = $getSelection()
+      if (
+        isSelected &&
+        $isNodeSelection(latestSelection) &&
+        latestSelection.getNodes().length === 1
+      ) {
+        $setSelection(null)
+        event.preventDefault()
+        content.focus()
+        return true
+      }
+      return false
+    },
+    [content, isSelected]
+  )
+
+  const onEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (activeEditorRef.current === content || buttonRef.current === event.target) {
+        $setSelection(null)
+        editor.update(() => {
+          setSelected(true)
+          const parentRootElement = editor.getRootElement()
+          if (parentRootElement !== null) {
+            parentRootElement.focus()
+          }
+        })
+        return true
+      }
+      return false
+    },
+    [content, editor, setSelected]
+  )
+
+  useEffect(() => {
+    let isMounted = true
+    const unregister = mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        if (isMounted) {
+          setSelection(editorState.read(() => $getSelection()))
+        }
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)
+    )
+    return () => {
+      isMounted = false
+      unregister()
+    }
+  }, [editor, onDelete, onEnter, onEscape])
+
+  const draggable = isSelected && $isNodeSelection(selection)
+  const isFocused = isSelected
+
+  const handleToggleModal = (): void => {
+    if (uuid != null) {
+      setOpen(!open)
+    }
+  }
+
+  const handleUpdateAdmonition = ({ admonitionType, title }: AdmonitionData): void => {
+    setOpen(false)
+    if (title != null && admonitionType != null) {
+      const admonitionPayload: AdmonitionAttributes = {
+        admonitionType,
+        title,
+      }
+
+      editor.update(() => {
+        node.update(admonitionPayload)
+      })
+    } else {
+      console.error('Error: unable to find image source from document.')
+    }
+  }
+
+  const classNames = cx(
+    'Admonition__container',
+    { focused: isFocused },
+    { draggable: $isNodeSelection(selection) }
+  )
+
+  const Icon = icons[admonitionType]
+
+  return (
+    <Suspense fallback={null}>
+      <div draggable={draggable} className={classNames}>
+        <button
+          type="button"
+          className="admonition-edit-button"
+          ref={buttonRef}
+          onClick={handleToggleModal}
+        >
+          Edit
+        </button>
+        <div className="AdmonitionNode__header">
+          <Icon />
+          <div>{title}</div>
+        </div>
+        <div className="AdmonitionNode__content">
+          <LexicalNestedComposer initialEditor={content}>
+            <OnChangePlugin
+              ignoreSelectionChange={true}
+              onChange={(_nestedEditorState, _nestedEditor, nestedTags) => {
+                // Note: Shared 'onChange' context provider so that
+                // caption change events can be registered with the parent
+                // editor - in turn triggering the parent editor onChange
+                // event, and therefore updating editorState and the field
+                // value in Payload (Save Draft and Publish Changes will then
+                // become 'enabled' from the caption as well as the parent
+                // editor content.)
+
+                // Parent editor state - not the LexicalNestedComposer in this case
+                // although there are other ways that this could be used.
+                const editorState = editor.getEditorState()
+                if (onChange != null) onChange(editorState, editor, nestedTags)
+              }}
+            />
+            {/* <LinkPlugin />
+            <FloatingLinkEditorPlugin />
+            <FloatingTextFormatToolbarPlugin /> */}
+            <HistoryPlugin externalHistoryState={historyState} />
+            <RichTextPlugin
+              contentEditable={<ContentEditable className="AdmonitionNode__contentEditable" />}
+              placeholder={
+                <Placeholder className="Admonition__placeholder">Enter some text...</Placeholder>
+              }
+              ErrorBoundary={LexicalErrorBoundary}
+            />
+          </LexicalNestedComposer>
+        </div>
+      </div>
+
+      {uuid != null && uuid.length > 0 && (
+        <AdmonitionModal
+          open={open}
+          onClose={handleToggleModal}
+          onSubmit={handleUpdateAdmonition}
+          data={{ title, admonitionType }}
+        />
+      )}
+    </Suspense>
+  )
+}

package/src/field/nodes/admonition-node/admonition-node.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import * as React from 'react'
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+} from 'lexical'
+import { $applyNodeReplacement, createEditor, DecoratorNode } from 'lexical'
+
+import type { AdmonitionAttributes, AdmonitionType, SerializedAdmonitionNode } from './types'
+
+const AdmonitionNodeComponent = React.lazy(async () => await import('./admonition-node-component'))
+
+function convertAdmonitionElement(domNode: Node): null | DOMConversionOutput {
+  if (domNode instanceof HTMLDivElement) {
+    const type = domNode.dataset.type as AdmonitionType
+    const title = domNode.dataset.title as string
+    const node = $createAdmonitionNode({ admonitionType: type, title })
+    return { node }
+  }
+  return null
+}
+
+export class AdmonitionNode extends DecoratorNode<React.JSX.Element> {
+  __admonitionType: AdmonitionType
+  __title: string
+  __content: LexicalEditor
+
+  static getType(): string {
+    return 'admonition'
+  }
+
+  static clone(node: AdmonitionNode): AdmonitionNode {
+    return new AdmonitionNode(node.__admonitionType, node.__title, node.__content, node.__key)
+  }
+
+  static importJSON(serializedNode: SerializedAdmonitionNode): AdmonitionNode {
+    const { admonitionType, title, content } = serializedNode
+    const node = $createAdmonitionNode({
+      admonitionType,
+      title,
+    })
+    const nestedEditor = node.__content
+    const editorState = nestedEditor.parseEditorState(content.editorState)
+    if (!editorState.isEmpty()) {
+      nestedEditor.setEditorState(editorState)
+    }
+    return node
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      div: (_node: Node) => ({
+        conversion: convertAdmonitionElement,
+        priority: 0,
+      }),
+    }
+  }
+
+  constructor(
+    admonitionType: AdmonitionType,
+    title: string,
+    content?: LexicalEditor,
+    key?: NodeKey
+  ) {
+    super(key)
+    this.__admonitionType = admonitionType
+    this.__title = title
+    this.__content = content ?? createEditor()
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('div')
+    element.setAttribute('data-type', this.__admonitionType)
+    element.setAttribute('data-title', this.__title)
+    return { element }
+  }
+
+  exportJSON(): SerializedAdmonitionNode {
+    return {
+      admonitionType: this.__admonitionType,
+      title: this.__title,
+      content: this.__content.toJSON(),
+      type: 'admonition',
+      version: 1,
+    }
+  }
+
+  isInline(): false {
+    return false
+  }
+
+  getTitle(): string {
+    return this.__title
+  }
+
+  setTitle(title: string): void {
+    const writable = this.getWritable()
+    writable.__title = title
+  }
+
+  getAdmonitionType(): AdmonitionType {
+    return this.__admonitionType
+  }
+
+  setAdmonitionType(admonitionType: AdmonitionType): void {
+    const writable = this.getWritable()
+    writable.__admonitionType = admonitionType
+  }
+
+  update(payload: AdmonitionAttributes): void {
+    const writable = this.getWritable()
+    const { admonitionType, title } = payload
+    if (admonitionType != null) {
+      writable.__admonitionType = admonitionType
+    }
+    if (title != null) {
+      writable.__title = title
+    }
+  }
+
+  // View
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const div = document.createElement('div')
+    div.setAttribute('data-type', this.__admonitionType)
+    div.setAttribute('data-title', this.__title)
+    const className = `${config.theme.admonition} admonition-${this.__admonitionType}`
+    if (className !== undefined) {
+      div.className = className
+    }
+    return div
+  }
+
+  updateDOM(prevNode: AdmonitionNode, dom: HTMLElement, config: EditorConfig): boolean {
+    const admonitionType = this.__admonitionType
+    if (admonitionType !== prevNode.__admonitionType) {
+      const className = `${config.theme.admonition} admonition-${admonitionType}`
+      if (className !== undefined) {
+        dom.className = className
+      }
+      dom.setAttribute('data-type', admonitionType)
+      return true
+    }
+    if (this.__title !== prevNode.__title) {
+      dom.setAttribute('data-title', this.__title)
+      return true
+    }
+    return false
+  }
+
+  decorate(): React.JSX.Element {
+    return (
+      <AdmonitionNodeComponent
+        admonitionType={this.__admonitionType}
+        title={this.__title}
+        content={this.__content}
+        nodeKey={this.getKey()}
+      />
+    )
+  }
+}
+
+export function $createAdmonitionNode({
+  admonitionType,
+  title,
+  content,
+  key,
+}: AdmonitionAttributes): AdmonitionNode {
+  return $applyNodeReplacement(new AdmonitionNode(admonitionType, title, content, key))
+}
+
+export function $isAdmonitionNode(node: LexicalNode | null | undefined): node is AdmonitionNode {
+  return node instanceof AdmonitionNode
+}

package/src/field/nodes/admonition-node/icons/danger-icon.css

@@ -0,0 +1,11 @@
+.danger-icon {
+  margin-right: 0.5rem;
+  margin-top: 3px;
+}
+
+.danger-icon svg {
+  display: block;
+  width: 25px;
+  height: 25px;
+  fill: #ce2438;
+}

package/src/field/nodes/admonition-node/icons/danger-icon.js

@@ -0,0 +1,17 @@
+import cx from 'classnames'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import './danger-icon.css'
+export function DangerIcon({ className, ...rest }) {
+  return _jsx('div', {
+    className: cx('danger-icon', className),
+    ...rest,
+    children: _jsx('svg', {
+      focusable: 'false',
+      'aria-hidden': 'true',
+      viewBox: '0 0 24 24',
+      children: _jsx('path', {
+        d: 'M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z',
+      }),
+    }),
+  })
+}

package/src/field/nodes/admonition-node/icons/danger-icon.tsx

@@ -0,0 +1,19 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import './danger-icon.css'
+
+interface Props {
+  className?: string
+}
+
+export function DangerIcon({ className, ...rest }: Props): React.JSX.Element {
+  return (
+    <div className={cx('danger-icon', className)} {...rest}>
+      <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>
+      </svg>
+    </div>
+  )
+}

package/src/field/nodes/admonition-node/icons/index.js

@@ -0,0 +1,4 @@
+export * from './danger-icon'
+export * from './note-icon'
+export * from './tip-icon'
+export * from './warning-icon'

package/src/field/nodes/admonition-node/icons/index.ts

@@ -0,0 +1,4 @@
+export * from './danger-icon'
+export * from './note-icon'
+export * from './tip-icon'
+export * from './warning-icon'

package/src/field/nodes/admonition-node/icons/note-icon.css

@@ -0,0 +1,11 @@
+.note-icon {
+  margin-right: 0.5rem;
+  margin-top: 3px;
+}
+
+.note-icon svg {
+  display: block;
+  width: 25px;
+  height: 25px;
+  fill: #445566;
+}

package/src/field/nodes/admonition-node/icons/note-icon.js

@@ -0,0 +1,17 @@
+import cx from 'classnames'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import './note-icon.css'
+export function NoteIcon({ className, ...rest }) {
+  return _jsx('div', {
+    className: cx('note-icon', className),
+    ...rest,
+    children: _jsx('svg', {
+      focusable: 'false',
+      'aria-hidden': 'true',
+      viewBox: '0 0 24 24',
+      children: _jsx('path', {
+        d: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z',
+      }),
+    }),
+  })
+}

package/src/field/nodes/admonition-node/icons/note-icon.tsx

@@ -0,0 +1,19 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import './note-icon.css'
+
+interface Props {
+  className?: string
+}
+
+export function NoteIcon({ className, ...rest }: Props): React.JSX.Element {
+  return (
+    <div className={cx('note-icon', className)} {...rest}>
+      <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"></path>
+      </svg>
+    </div>
+  )
+}

package/src/field/nodes/admonition-node/icons/tip-icon.css

@@ -0,0 +1,11 @@
+.tip-icon {
+  margin-right: 0.5rem;
+  margin-top: 3px;
+}
+
+.tip-icon svg {
+  display: block;
+  width: 25px;
+  height: 25px;
+  fill: #0fad2f;
+}

package/src/field/nodes/admonition-node/icons/tip-icon.js

@@ -0,0 +1,17 @@
+import cx from 'classnames'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import './tip-icon.css'
+export function TipIcon({ className, ...rest }) {
+  return _jsx('div', {
+    className: cx('tip-icon', className),
+    ...rest,
+    children: _jsx('svg', {
+      focusable: 'false',
+      'aria-hidden': 'true',
+      viewBox: '0 0 24 24',
+      children: _jsx('path', {
+        d: 'M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z',
+      }),
+    }),
+  })
+}

package/src/field/nodes/admonition-node/icons/tip-icon.tsx

@@ -0,0 +1,19 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import './tip-icon.css'
+
+interface Props {
+  className?: string
+}
+
+export function TipIcon({ className, ...rest }: Props): React.JSX.Element {
+  return (
+    <div className={cx('tip-icon', className)} {...rest}>
+      <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
+      </svg>
+    </div>
+  )
+}

package/src/field/nodes/admonition-node/icons/warning-icon.css

@@ -0,0 +1,11 @@
+.warning-icon {
+  margin-right: 0.5rem;
+  margin-top: 3px;
+}
+
+.warning-icon svg {
+  display: block;
+  width: 25px;
+  height: 25px;
+  fill: #e2cf1e;
+}

package/src/field/nodes/admonition-node/icons/warning-icon.js

@@ -0,0 +1,17 @@
+import cx from 'classnames'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import './warning-icon.css'
+export function WarningIcon({ className, ...rest }) {
+  return _jsx('div', {
+    className: cx('warning-icon', className),
+    ...rest,
+    children: _jsx('svg', {
+      focusable: 'false',
+      'aria-hidden': 'true',
+      viewBox: '0 0 24 24',
+      children: _jsx('path', {
+        d: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+      }),
+    }),
+  })
+}

package/src/field/nodes/admonition-node/icons/warning-icon.tsx

@@ -0,0 +1,19 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import './warning-icon.css'
+
+interface Props {
+  className?: string
+}
+
+export function WarningIcon({ className, ...rest }: Props): React.JSX.Element {
+  return (
+    <div className={cx('warning-icon', className)} {...rest}>
+      <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"></path>
+      </svg>
+    </div>
+  )
+}

package/src/field/nodes/admonition-node/index.ts

@@ -0,0 +1,14 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+export * from './admonition-node'
+// Intentionally NOT re-exported: `admonition-node-component` is loaded
+// lazily via `React.lazy` inside `admonition-node.tsx` so it can land in
+// its own chunk. Re-exporting it here would static-import it back into
+// any consumer of this barrel and defeat the split.
+export * from './types'