@kaitify/react 0.0.1-beta.1

package/src/editor/wrapper/render.ts

@@ -0,0 +1,79 @@
+import { Editor, getNodeRenderOptions, KNodeMarksType, KNodeRenderOptionType } from '@kaitify/core'
+import React, { ReactNode } from 'react'
+
+//原生属性和react属性对照表
+export const ATTR_MAP: Record<string, string> = {
+  class: 'className',
+  for: 'htmlFor',
+  maxlength: 'maxLength',
+  minlength: 'minLength',
+  readonly: 'readOnly',
+  tabindex: 'tabIndex',
+  colspan: 'colSpan',
+  rowspan: 'rowSpan',
+  contenteditable: 'contentEditable',
+  autofocus: 'autoFocus',
+  enctype: 'encType',
+  novalidate: 'noValidate',
+  formnovalidate: 'formNoValidate',
+  defaultchecked: 'defaultChecked',
+  defaultvalue: 'defaultValue',
+  frameborder: 'frameBorder',
+  allowfullscreen: 'allowFullScreen',
+  autoplay: 'autoPlay',
+  controlslist: 'controlsList',
+  crossorigin: 'crossOrigin',
+  playsinline: 'playsInline',
+  acceptcharset: 'acceptCharset',
+  spellcheck: 'spellCheck',
+  srcdoc: 'srcDoc',
+  viewbox: 'viewBox',
+  preserveaspectratio: 'preserveAspectRatio'
+}
+
+/**
+ * 替换 attrs 的属性名为 React 识别的形式
+ */
+export const normalizeAttrs = (attrs: KNodeMarksType) => {
+  const newAttrs: KNodeMarksType = {}
+  for (const key in attrs) {
+    if (!Object.prototype.hasOwnProperty.call(attrs, key)) continue
+    const newKey = ATTR_MAP[key] ?? key
+    newAttrs[newKey] = attrs[key]
+  }
+  return newAttrs
+}
+
+/**
+ * 生成ReactNode
+ */
+export const createReactNode = (options: KNodeRenderOptionType) => {
+  const children: ReactNode[] = []
+  if (options.children && options.children.length) {
+    options.children.forEach(item => {
+      children.push(createReactNode(item))
+    })
+  } else if (options.textContent) {
+    children.push(options.textContent)
+  }
+  options.attrs = normalizeAttrs(options.attrs)
+  if (Object.prototype.hasOwnProperty.call(options.attrs, 'contentEditable')) {
+    options.attrs['suppressContentEditableWarning'] = 'true'
+  }
+  return React.createElement(
+    options.tag,
+    {
+      key: options.key,
+      ...options.attrs,
+      style: options.styles
+    },
+    children.length === 0 ? undefined : children
+  )
+}
+
+/**
+ * 创建ReactNode数组
+ */
+export const createReactNodes = (editor: Editor): ReactNode[] => {
+  return editor.stackNodes.map(item => createReactNode(getNodeRenderOptions(editor, item)))
+}

package/src/editor/wrapper/style.module.less

@@ -0,0 +1,10 @@
+.kaitify-border {
+  border: 1px solid @border-color;
+  border-radius: @border-radius;
+  transition: border-color 500ms, box-shadow 500ms;
+
+  &:focus {
+    border-color: @theme;
+    box-shadow: 0 0 0 4px @lightest-theme;
+  }
+}

package/src/editor/wrapper/wrapper.tsx

@@ -0,0 +1,220 @@
+import { forwardRef, ReactNode, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
+import { createRoot, Root } from 'react-dom/client'
+import { Editor } from '@kaitify/core'
+import classNames from 'classnames'
+import { translate } from '@/locale'
+import { Teleport } from '@/core/teleport'
+import { EditorContext } from '@/hooks/use-editor'
+import { StateType, WrapperPropsType, WrapperRefType } from './props'
+import { createReactNodes } from './render'
+import styles from './style.module.less'
+
+/**
+ * 编辑器编辑区域组件
+ */
+const Wrapper = forwardRef<WrapperRefType, WrapperPropsType>((props, ref) => {
+  //dom
+  const elRef = useRef<HTMLDivElement | null>(null)
+  //编辑器实例
+  const editor = useRef<Editor | undefined>(undefined)
+  //是否编辑器内部修改值
+  const [internalModification, setInternalModification] = useState(false)
+  //是否鼠标按下
+  const [isMouseDown, setIsMouseDown] = useState(false)
+  //编辑器更新标记
+  const [updateKey, setUpdateKey] = useState(0)
+  //编辑器响应式对象
+  const state = useMemo<StateType>(() => {
+    return {
+      editor: {
+        value: editor.current
+      },
+      selection: {
+        value: editor.current?.selection
+      }
+    }
+  }, [updateKey])
+  //编辑器是否创建完成
+  const isCreated = useRef(false)
+  const rootRef = useRef<Root | null>(null)
+
+  //渲染插槽
+  const renderSlot = (value?: ReactNode | ((props: StateType) => ReactNode)) => {
+    if (typeof value === 'function') {
+      return value(state)
+    }
+    return value
+  }
+
+  //渲染编辑器内容
+  const renderChildrenSync = () => {
+    return new Promise<void>(resolve => {
+      //在微任务里调用 flushSync，避开渲染栈限制
+      queueMicrotask(() => {
+        //使用flushSync能够捕获render完成
+        flushSync(() => {
+          //初始创建
+          if (!rootRef.current) {
+            rootRef.current = createRoot(elRef.current!)
+          }
+          rootRef.current.render(<>{createReactNodes(editor.current!)}</>)
+        })
+        resolve()
+      })
+    })
+  }
+
+  //创建编辑器
+  const createEditor = async () => {
+    //StrictMode模式下第二次渲染存在这个了，则阻止创建
+    if (editor.current) {
+      return
+    }
+    Editor.configure({
+      el: elRef.current!,
+      value: props.value ?? '',
+      placeholder: props.placeholder,
+      dark: props.dark,
+      editable: !props.disabled,
+      autofocus: props.autofocus,
+      allowCopy: props.allowCopy,
+      allowCut: props.allowCut,
+      allowPaste: props.allowPaste,
+      allowPasteHtml: props.allowPasteHtml,
+      priorityPasteFiles: props.priorityPasteFiles,
+      textRenderTag: props.textRenderTag,
+      blockRenderTag: props.blockRenderTag,
+      emptyRenderTags: props.emptyRenderTags,
+      extraKeepTags: props.extraKeepTags,
+      extensions: [...(props.extensions ?? [])],
+      formatRules: props.formatRules,
+      onDomParseNode: props.onDomParseNode,
+      onPasteKeepMarks: props.onPasteKeepMarks,
+      onPasteKeepStyles: props.onPasteKeepStyles,
+      onPasteText: props.onPasteText,
+      onPasteHtml: props.onPasteHtml,
+      onPasteImage: props.onPasteImage,
+      onPasteVideo: props.onPasteVideo,
+      onPasteFile: props.onPasteFile,
+      onDetachMentBlockFromParent: props.onDetachMentBlockFromParent,
+      onBeforePatchNodeToFormat: props.onBeforePatchNodeToFormat,
+      onInsertParagraph: props.onInsertParagraph,
+      onDeleteComplete: props.onDeleteComplete,
+      onKeydown: props.onKeydown,
+      onKeyup: props.onKeyup,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      onBeforeUpdateView: props.onBeforeUpdateView,
+      onAfterUpdateView: props.onAfterUpdateView,
+      onCreate(ed) {
+        editor.current = ed
+        setUpdateKey(oldValue => oldValue + 1)
+      },
+      onCreated(ed) {
+        props.onCreated?.(ed)
+        setUpdateKey(oldValue => oldValue + 1)
+        isCreated.current = true
+      },
+      onSelectionUpdate(selection) {
+        props.onSelectionUpdate?.apply(this, [selection])
+        setUpdateKey(oldValue => oldValue + 1)
+      },
+      async onUpdateView() {
+        //渲染内容并等待视图渲染完成后
+        await renderChildrenSync()
+        //阻止默认渲染
+        return false
+      },
+      onChange: v => {
+        setInternalModification(true)
+        props.onChange?.(v)
+      }
+    })
+  }
+
+  useImperativeHandle(ref, () => ({
+    elRef,
+    state
+  }))
+
+  //监听编辑器的值
+  useEffect(() => {
+    if (editor.current && isCreated.current) {
+      //内部改变
+      if (internalModification) {
+        setInternalModification(false)
+        setUpdateKey(oldValue => oldValue + 1)
+      }
+      //外部改变，进行视图更新
+      else {
+        editor.current.review(props.value ?? '').then(() => {
+          if (!props.disabled && props.autofocus) {
+            editor.current?.setSelectionAfter()
+            editor.current?.updateRealSelection()
+            setUpdateKey(oldValue => oldValue + 1)
+          }
+        })
+      }
+    }
+  }, [props.value])
+
+  //监听以下属性变化，对编辑器进行更新
+  useEffect(() => {
+    if (editor.current && isCreated.current) {
+      editor.current.setEditable(!props.disabled)
+      editor.current.setDark(props.dark ?? false)
+      editor.current.allowCopy = props.allowCopy ?? true
+      editor.current.allowCut = props.allowCut ?? true
+      editor.current.allowPaste = props.allowPaste ?? true
+      editor.current.allowPasteHtml = props.allowPasteHtml ?? false
+      editor.current.priorityPasteFiles = props.priorityPasteFiles ?? false
+      setUpdateKey(oldValue => oldValue + 1)
+    }
+  }, [props.disabled, props.dark, props.allowCopy, props.allowCut, props.allowPaste, props.allowPasteHtml, props.priorityPasteFiles])
+
+  //初始化
+  useEffect(() => {
+    //创建编辑器
+    createEditor()
+    //卸载时销毁编辑器
+    return () => {
+      //解决StrictMode模式下第一次还没创建完成就销毁导致的一系列问题，只有创建完成了才能进行销毁
+      if (isCreated.current) {
+        editor.current?.destroy()
+        editor.current = undefined
+        //放到微任务中去执行
+        queueMicrotask(() => {
+          rootRef.current?.unmount()
+          rootRef.current = null
+        })
+      }
+    }
+  }, [])
+
+  return (
+    <EditorContext.Provider
+      value={{
+        state,
+        isMouseDown,
+        disabled: props.disabled ?? false,
+        el: elRef.current,
+        t: (key: string) => translate(props.locale ?? 'zh-CN', key),
+        dark: props.dark ?? false
+      }}
+    >
+      <>
+        {/* before */}
+        {!!props.appendBeforeTo ? <Teleport to={props.appendBeforeTo}>{renderSlot(props.before)}</Teleport> : renderSlot(props.before)}
+        {/* 编辑区域 */}
+        <div ref={elRef} className={classNames(styles['kaitify-border'], props.className)} style={props.style} onMouseDown={() => setIsMouseDown(true)} onMouseUp={() => setIsMouseDown(false)} />
+        {/* after */}
+        {!!props.appendAfterTo ? <Teleport to={props.appendAfterTo}>{renderSlot(props.after)}</Teleport> : renderSlot(props.after)}
+        {/* 插槽 */}
+        {renderSlot(props.children)}
+      </>
+    </EditorContext.Provider>
+  )
+})
+
+export default Wrapper

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useEditor } from './use-editor'

package/src/hooks/use-editor.ts

@@ -0,0 +1,47 @@
+import { StateType } from '@/editor/wrapper'
+import { translate } from '@/locale'
+import { createContext, useContext } from 'react'
+
+/**
+ * 上下文数据类型
+ */
+export type EditorContextType = {
+  /**
+   * 编辑器状态数据
+   */
+  state: StateType
+  /**
+   * 编辑器是否禁用
+   */
+  disabled: boolean
+  /**
+   * 编辑器内鼠标是否按下
+   */
+  isMouseDown: boolean
+  /**
+   * 编辑器元素
+   */
+  el: HTMLDivElement | null
+  /**
+   * 翻译函数
+   */
+  t: (key: string) => string
+  /**
+   * 是否深色模式
+   */
+  dark: boolean
+}
+
+export const EditorContext = createContext<EditorContextType>({
+  state: {
+    editor: {},
+    selection: {}
+  },
+  disabled: false,
+  isMouseDown: false,
+  el: null,
+  t: (key: string) => translate('zh-CN', key),
+  dark: false
+})
+
+export const useEditor = () => useContext(EditorContext)

package/src/iconfont/iconfont.css

@@ -0,0 +1,247 @@
+.kaitify-icon-emoji:before {
+  content: '\e623';
+}
+
+.kaitify-icon-full-screen:before {
+  content: '\e62a';
+}
+
+.kaitify-icon-unlink:before {
+  content: '\e604';
+}
+
+.kaitify-icon-wrap-down:before {
+  content: '\e672';
+}
+
+.kaitify-icon-wrap-up:before {
+  content: '\e673';
+}
+
+.kaitify-icon-list-square:before {
+  content: '\e659';
+}
+
+.kaitify-icon-list-circle:before {
+  content: '\e65a';
+}
+
+.kaitify-icon-list-disc:before {
+  content: '\e65b';
+}
+
+.kaitify-icon-list-cjk-ideographic:before {
+  content: '\e658';
+}
+
+.kaitify-icon-list-lower-roman:before {
+  content: '\e653';
+}
+
+.kaitify-icon-list-lower-greek:before {
+  content: '\e654';
+}
+
+.kaitify-icon-list-upper-roman:before {
+  content: '\e655';
+}
+
+.kaitify-icon-list-decimal:before {
+  content: '\e656';
+}
+
+.kaitify-icon-list-lower-alpha:before {
+  content: '\e657';
+}
+
+.kaitify-icon-list-upper-alpha:before {
+  content: '\e651';
+}
+
+.kaitify-icon-merge-cells-top:before {
+  content: '\e73e';
+}
+
+.kaitify-icon-merge-cells-left:before {
+  content: '\e741';
+}
+
+.kaitify-icon-merge-cells-right:before {
+  content: '\e73f';
+}
+
+.kaitify-icon-merge-cells-bottom:before {
+  content: '\e740';
+}
+
+.kaitify-icon-mathformula:before {
+  content: '\e616';
+}
+
+.kaitify-icon-separator:before {
+  content: '\e6e5';
+}
+
+.kaitify-icon-attachment:before {
+  content: '\e689';
+}
+
+.kaitify-icon-task:before {
+  content: '\e605';
+}
+
+.kaitify-icon-upload:before {
+  content: '\e637';
+}
+
+.kaitify-icon-remove:before {
+  content: '\e852';
+}
+
+.kaitify-icon-code:before {
+  content: '\e6a0';
+}
+
+.kaitify-icon-loop:before {
+  content: '\e621';
+}
+
+.kaitify-icon-muted:before {
+  content: '\ea0f';
+}
+
+.kaitify-icon-controls:before {
+  content: '\e627';
+}
+
+.kaitify-icon-video:before {
+  content: '\e622';
+}
+
+.kaitify-icon-delete:before {
+  content: '\e60f';
+}
+
+.kaitify-icon-image:before {
+  content: '\e6ed';
+}
+
+.kaitify-icon-brush:before {
+  content: '\e71c';
+}
+
+.kaitify-icon-check:before {
+  content: '\e6cc';
+}
+
+.kaitify-icon-italic:before {
+  content: '\e69f';
+}
+
+.kaitify-icon-redo:before {
+  content: '\e6df';
+}
+
+.kaitify-icon-undo:before {
+  content: '\e713';
+}
+
+.kaitify-icon-code-block:before {
+  content: '\e620';
+}
+
+.kaitify-icon-table:before {
+  content: '\e6c4';
+}
+
+.kaitify-icon-delete-table:before {
+  content: '\e7a2';
+}
+
+.kaitify-icon-align-center:before {
+  content: '\e783';
+}
+
+.kaitify-icon-align-justify:before {
+  content: '\e786';
+}
+
+.kaitify-icon-align-left:before {
+  content: '\e787';
+}
+
+.kaitify-icon-bold:before {
+  content: '\e78d';
+}
+
+.kaitify-icon-align-right:before {
+  content: '\e78f';
+}
+
+.kaitify-icon-font-color:before {
+  content: '\e792';
+}
+
+.kaitify-icon-format-clear:before {
+  content: '\e793';
+}
+
+.kaitify-icon-indent-increase:before {
+  content: '\e798';
+}
+
+.kaitify-icon-quote:before {
+  content: '\e79b';
+}
+
+.kaitify-icon-indent-decrease:before {
+  content: '\e79c';
+}
+
+.kaitify-icon-link:before {
+  content: '\e7a1';
+}
+
+.kaitify-icon-subscript:before {
+  content: '\e7a5';
+}
+
+.kaitify-icon-superscript:before {
+  content: '\e7a6';
+}
+
+.kaitify-icon-strikethrough:before {
+  content: '\e7a7';
+}
+
+.kaitify-icon-underline:before {
+  content: '\e7a8';
+}
+
+.kaitify-icon-caret-down:before {
+  content: '\e78c';
+}
+
+.kaitify-icon-delete-column:before {
+  content: '\e784';
+}
+
+.kaitify-icon-delete-row:before {
+  content: '\e785';
+}
+
+.kaitify-icon-insert-column-left:before {
+  content: '\e788';
+}
+
+.kaitify-icon-insert-column-right:before {
+  content: '\e789';
+}
+
+.kaitify-icon-insert-row-bottom:before {
+  content: '\e78a';
+}
+
+.kaitify-icon-insert-row-top:before {
+  content: '\e78b';
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+//字体图标
+import './iconfont/iconfont.css'
+//编辑器核心库
+export * from '@kaitify/core'
+//分隔线
+export * from './core/divider'
+//选项卡
+export * from './core/tabs'
+//复选框
+export * from './core/checkbox'
+//图标
+export * from './core/icon'
+//编辑器
+export * from './editor/wrapper'
+//气泡栏
+export * from './editor/bubble'
+//菜单
+export * from './editor/menu'
+//hooks
+export * from './hooks'

package/src/locale/en-us.ts

@@ -0,0 +1,30 @@
+export default {
+  本地上传: 'Local Upload',
+  远程地址: 'Remote Address',
+  附件名称: 'Attachment Name',
+  附件地址: 'Attachment Address',
+  附件: 'Attachment',
+  插入: 'Insert',
+  更新: 'Update',
+  默认颜色: 'Default Color',
+  默认字体: 'Default Font',
+  默认字号: 'Default Font Size',
+  默认行高: 'Default Line Height',
+  正文: 'Paragraph',
+  图片名称: 'Image Name',
+  图片地址: 'Image Address',
+  图片: 'Image',
+  链接地址: 'Link Address',
+  新窗口打开: 'New Window',
+  链接文字: 'Link Text',
+  是否自动播放: 'AutoPlay',
+  视频地址: 'Video Address',
+  输入Latex数学公式: 'Enter Latex Mathematical Formulas',
+  一级标题: 'Heading 1',
+  二级标题: 'Heading 2',
+  三级标题: 'Heading 3',
+  四级标题: 'Heading 4',
+  五级标题: 'Heading 5',
+  六级标题: 'Heading 6',
+  自动识别: 'Auto Detection'
+}

package/src/locale/index.ts

@@ -0,0 +1,18 @@
+import enUS from './en-us'
+import jaJP from './ja-jp'
+import koKR from './ko-kr'
+
+export type LocaleType = 'zh-CN' | 'en-US' | 'ko-KR' | 'ja-JP'
+
+const localeMap = {
+  'en-US': enUS as typeof enUS & { [key: string]: string },
+  'ko-KR': koKR as typeof koKR & { [key: string]: string },
+  'ja-JP': jaJP as typeof jaJP & { [key: string]: string }
+}
+
+export const translate = (locale: LocaleType, key: string) => {
+  if (locale == 'zh-CN') {
+    return key
+  }
+  return localeMap[locale][key] ?? key
+}