@kaitify/core 0.0.1-beta.1

package/lib/model/KNode.d.ts

@@ -0,0 +1,258 @@
+import * as CSS from 'csstype';
+/**
+ * 节点类型
+ */
+export type KNodeType = 'text' | 'closed' | 'inline' | 'block';
+/**
+ * 标记集合类型
+ */
+export type KNodeMarksType = {
+    [mark: string]: string | number;
+};
+/**
+ * 样式集合类型
+ */
+export type KNodeStylesType = CSS.Properties<string | number> & {
+    [style: string]: string | number;
+};
+/**
+ * 节点匹配入参类型
+ */
+export type KNodeMatchOptionType = {
+    tag?: string;
+    marks?: KNodeMarksType | {
+        [mark: string]: boolean;
+    };
+    styles?: KNodeStylesType | {
+        [style: string]: boolean;
+    };
+};
+/**
+ * 创建节点的入参类型
+ */
+export type KNodeCreateOptionType = {
+    type: KNodeType;
+    tag?: string;
+    marks?: KNodeMarksType;
+    styles?: KNodeStylesType;
+    namespace?: string;
+    textContent?: string;
+    locked?: boolean;
+    fixed?: boolean;
+    nested?: boolean;
+    void?: boolean;
+    children?: KNodeCreateOptionType[];
+};
+/**
+ * 创建零宽度无断空白文本节点的入参类型
+ */
+export type ZeroWidthTextKNodeCreateOptionType = {
+    marks?: KNodeMarksType;
+    styles?: KNodeStylesType;
+    namespace?: string;
+    locked?: boolean;
+};
+/**
+ * 基本节点
+ */
+export declare class KNode {
+    /**
+     * 唯一key【不可修改】
+     */
+    key: number;
+    /**
+     * 类型【可以修改】
+     */
+    type?: KNodeType;
+    /**
+     * 渲染标签【可以修改】
+     */
+    tag?: string;
+    /**
+     * 文本值【可以修改】
+     */
+    textContent?: string;
+    /**
+     * 标记集合【可以修改】
+     */
+    marks?: KNodeMarksType;
+    /**
+     * 样式集合，样式名称请使用驼峰写法，虽然在渲染时兼容处理了中划线格式的样式名称，但是在其他地方可能会出现问题并且编辑器内部在样式相关的判断都是以驼峰写法为主【可以修改】
+     */
+    styles?: KNodeStylesType;
+    /**
+     * 是否锁定节点【可以修改】：
+     * 针对块节点，在符合合并条件的情况下是否允许编辑器将其与父节点或者子节点进行合并；
+     * 针对行内节点，在符合合并条件的情况下是否允许编辑器将其与相邻节点或者父节点或者子节点进行合并；
+     * 针对文本节点，在符合合并的条件下是否允许编辑器将其与相邻节点或者父节点进行合并。
+     */
+    locked: boolean;
+    /**
+     * 是否为固定块节点，值为true时：当光标在节点起始处或者光标在节点内只有占位符时，执行删除操作不会删除此节点，会再次创建一个占位符进行处理；当光标在节点内且节点不是代码块样式，不会进行换行【可以修改】
+     */
+    fixed: boolean;
+    /**
+     * 是否为固定格式的内嵌块节点，如li、tr、td等【可以修改】
+     */
+    nested: boolean;
+    /**
+     * 是否为不可见节点，意味着此类节点在编辑器内视图内无法看到
+     */
+    void?: boolean;
+    /**
+     * 命名空间【可以修改】
+     */
+    namespace?: string;
+    /**
+     * 子节点数组【可以修改】
+     */
+    children?: KNode[];
+    /**
+     * 父节点【可以修改】
+     */
+    parent?: KNode;
+    /**
+     * 【API】是否块节点
+     */
+    isBlock(): boolean;
+    /**
+     * 【API】是否行内节点
+     */
+    isInline(): boolean;
+    /**
+     * 【API】是否闭合节点
+     */
+    isClosed(): boolean;
+    /**
+     * 【API】是否文本节点
+     */
+    isText(): boolean;
+    /**
+     * 【API】获取所在的根级块节点
+     */
+    getRootBlock(): KNode;
+    /**
+     * 【API】获取所在块级节点
+     */
+    getBlock(): KNode;
+    /**
+     * 【API】获取所在行内节点
+     */
+    getInline(): KNode | null;
+    /**
+     * 【API】是否有子节点
+     */
+    hasChildren(): boolean;
+    /**
+     * 【API】是否空节点
+     */
+    isEmpty(): boolean;
+    /**
+     * 【API】是否零宽度无断空白文本节点
+     */
+    isZeroWidthText(): boolean;
+    /**
+     * 【API】是否占位符
+     */
+    isPlaceholder(): boolean;
+    /**
+     * 【API】是否含有标记
+     */
+    hasMarks(): boolean;
+    /**
+     * 【API】是否含有样式
+     */
+    hasStyles(): boolean;
+    /**
+     * 【API】判断节点是否不可编辑的，如果是返回设置不可编辑的那个节点，否则返回null
+     */
+    getUneditable(): KNode | null;
+    /**
+     * 【API】当前节点是否只包含占位符
+     */
+    allIsPlaceholder(): boolean;
+    /**
+     * 【API】设置为空节点
+     */
+    toEmpty(): void;
+    /**
+     * 【API】比较当前节点和另一个节点的styles是否一致
+     */
+    isEqualStyles(node: KNode): boolean;
+    /**
+     * 【API】比较当前节点和另一个节点的marks是否一致
+     */
+    isEqualMarks(node: KNode): boolean;
+    /**
+     * 【API】判断当前节点是否在拥有代码块样式的块级节点内（包括自身）
+     */
+    isInCodeBlockStyle(): KNode | null;
+    /**
+     * 【API】判断当前节点是否与另一个节点相同
+     */
+    isEqual(node: KNode): boolean;
+    /**
+     * 【API】判断当前节点是否包含指定节点
+     */
+    isContains(node: KNode): boolean;
+    /**
+     * 【API】复制节点，deep 为true表示深度复制，即复制子节点，否则只会复制自身
+     */
+    clone: (deep?: boolean | undefined) => KNode;
+    /**
+     * 完全复制节点，涵盖每个属性
+     */
+    fullClone(): KNode;
+    /**
+     * 【API】如果当前节点是文本节点或者闭合节点，则判断是不是指定节点后代中所有文本节点和闭合节点中的第一个
+     */
+    firstTextClosedInNode: (node: KNode) => boolean;
+    /**
+     * 【API】如果当前节点是文本节点或者闭合节点，则判断是不是指定节点后代中所有文本节点和闭合节点中的最后一个
+     */
+    lastTextClosedInNode(node: KNode): boolean;
+    /**
+     * 【API】获取当前节点在某个节点数组中的前一个非空节点
+     */
+    getPrevious(nodes: KNode[]): KNode | null;
+    /**
+     * 【API】获取当前节点在某个节点数组中的后一个非空节点
+     */
+    getNext(nodes: KNode[]): KNode | null;
+    /**
+     * 【API】判断当前节点是否符合指定的条件，marks和styles参数中的属性值可以是true表示只判断是否拥有该标记或者样式，而不关心是什么值
+     */
+    isMatch(options: KNodeMatchOptionType): boolean;
+    /**
+     * 【API】判断当前节点是否存在于符合条件的节点内，包含自身，如果是返回符合条件的节点，否则返回null
+     */
+    getMatchNode(options: KNodeMatchOptionType): KNode | null;
+    /**
+     * 【API】获取当前节点下的所有可聚焦的节点，如果自身符合也会包括在内，type是all获取闭合节点和文本节点，type是closed获取闭合节点，type是text获取文本节点
+     */
+    getFocusNodes: (type?: "all" | "closed" | "text" | undefined) => KNode[];
+    /**
+     * 【API】创建节点
+     */
+    static create(options: KNodeCreateOptionType): KNode;
+    /**
+     * 【API】创建零宽度无断空白文本节点
+     */
+    static createZeroWidthText(options?: ZeroWidthTextKNodeCreateOptionType): KNode;
+    /**
+     * 【API】创建占位符
+     */
+    static createPlaceholder(): KNode;
+    /**
+     * 【API】判断参数是否节点
+     */
+    static isKNode(val: any): boolean;
+    /**
+     * 【API】将某个节点数组扁平化处理后返回
+     */
+    static flat(nodes: KNode[]): KNode[];
+    /**
+     * 【API】在指定的节点数组中根据key查找节点
+     */
+    static searchByKey(key: string | number, nodes: KNode[]): KNode | null;
+}

package/lib/model/Selection.d.ts

@@ -0,0 +1,29 @@
+import { KNode } from './KNode';
+/**
+ * 光标点位类型，node仅支持文本节点和闭合节点
+ */
+export type SelectionPointType = {
+    node: KNode;
+    offset: number;
+};
+/**
+ * 光标选区
+ */
+export declare class Selection {
+    /**
+     * 起点
+     */
+    start?: SelectionPointType;
+    /**
+     * 终点
+     */
+    end?: SelectionPointType;
+    /**
+     * 是否已经初始化设置光标位置
+     */
+    focused(): boolean;
+    /**
+     * 光标是否折叠
+     */
+    collapsed(): boolean;
+}

package/lib/model/config/dom-observe.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from '../Editor';
+/**
+ * 移除对编辑器的dom监听
+ */
+export declare const removeDomObserve: (editor: Editor) => void;
+/**
+ * 设置对编辑器的dom监听，主要解决非法dom插入问题
+ * 中文输入和updateView时不会启用dom监听
+ */
+export declare const setDomObserve: (editor: Editor) => void;

package/lib/model/config/event-handler.d.ts

@@ -0,0 +1,33 @@
+import { Editor } from '../Editor';
+/**
+ * 监听外部改变selection
+ */
+export declare const onSelectionChange: (this: Editor) => Promise<void>;
+/**
+ * 监听beforeinput
+ */
+export declare const onBeforeInput: (this: Editor, e: Event) => Promise<void>;
+/**
+ * 监听中文输入
+ */
+export declare const onComposition: (this: Editor, e: Event) => Promise<void>;
+/**
+ * 监听键盘事件
+ */
+export declare const onKeyboard: (this: Editor, e: Event) => void;
+/**
+ * 监听编辑器获取焦点
+ */
+export declare const onFocus: (this: Editor, e: Event) => void;
+/**
+ * 监听编辑器失去焦点
+ */
+export declare const onBlur: (this: Editor, e: Event) => void;
+/**
+ * 监听编辑器复制
+ */
+export declare const onCopy: (this: Editor, e: Event) => void;
+/**
+ * 监听编辑器剪切
+ */
+export declare const onCut: (this: Editor, e: Event) => void;

package/lib/model/config/format-patch.d.ts

@@ -0,0 +1,25 @@
+import { KNode } from '../KNode';
+/**
+ * 这里的比对结果仅进行格式化处理，只需要判断节点是否变化
+ */
+/**
+ * 节点数组比对结果类型
+ */
+export type NodePatchResultType = {
+    /**
+     * 新节点
+     */
+    newNode: KNode | null;
+    /**
+     * 旧节点
+     */
+    oldNode: KNode | null;
+};
+/**
+ * 对新旧两个节点数组进行比对
+ */
+export declare const patchNodes: (newNodes: KNode[], oldNodes: (KNode | null)[]) => NodePatchResultType[];
+/**
+ * 对新旧两个节点进行比对
+ */
+export declare const patchNode: (newNode: KNode, oldNode: KNode) => NodePatchResultType[];

package/lib/model/config/format-rules.d.ts

@@ -0,0 +1,37 @@
+import { Editor } from '../Editor';
+import { KNode } from '../KNode';
+/**
+ * 格式化函数类型
+ */
+export type RuleFunctionType = (state: {
+    editor: Editor;
+    node: KNode;
+}) => void;
+/**
+ * 针对节点自身：处理块节点的标签，部分块节点需要转为默认块节点标签
+ */
+export declare const fomratBlockTagParse: RuleFunctionType;
+/**
+ * 针对子节点中的块节点：行内节点的子节点中含有块节点则该节点转为块节点；子节点中的其他节点也转为块节点
+ */
+export declare const formatBlockInChildren: RuleFunctionType;
+/**
+ * 针对节点自身：处理不可编辑的非块级节点：在两侧添加零宽度无断空白字符 & 重置不可编辑节点内的光标位置
+ */
+export declare const formatUneditableNoodes: RuleFunctionType;
+/**
+ * 针对节点的子节点数组：处理子节点中的占位符，如果占位符和其他节点共存则删除占位符，如果只存在占位符则将多个占位符合并为一个（光标可能会更新）
+ */
+export declare const formatPlaceholderMerge: RuleFunctionType;
+/**
+ * 针对节点自身：将文本节点内连续的零宽度无断空白字符合并（光标可能会更新）
+ */
+export declare const formatZeroWidthTextMerge: RuleFunctionType;
+/**
+ * 针对节点的子节点数组：兄弟节点合并策略（光标可能会更新）
+ */
+export declare const formatSiblingNodesMerge: RuleFunctionType;
+/**
+ * 针对节点的子节点数组：父子节点合并策略（光标可能会更新）
+ */
+export declare const formatParentNodeMerge: RuleFunctionType;

package/lib/model/config/function.d.ts

@@ -0,0 +1,84 @@
+import { Extension } from '../../extensions';
+import { Editor } from '../Editor';
+import { KNode } from '../KNode';
+import { RuleFunctionType } from './format-rules';
+/**
+ * 获取选区内的可聚焦节点所在的块节点数组
+ */
+export declare const getSelectionBlockNodes: (this: Editor) => KNode[];
+/**
+ * 打散指定的节点，将其分裂成多个节点，如果子孙节点还有子节点则继续打散
+ */
+export declare const splitNodeToNodes: (this: Editor, node: KNode) => void;
+/**
+ * 清空固定块节点的内容
+ */
+export declare const emptyFixedBlock: (this: Editor, node: KNode) => void;
+/**
+ * 该方法目前只为delete方法内部使用：将后一个块节点与前一个块节点合并
+ */
+export declare const mergeBlock: (this: Editor, node: KNode, target: KNode) => void;
+/**
+ * 判断编辑器内的指定节点是否可以进行合并操作，parent表示和父节点进行合并，prevSibling表示和前一个兄弟节点进行合并，nextSibling表示和下一个兄弟节点合并，如果可以返回合并的对象节点
+ */
+export declare const getAllowMergeNode: (this: Editor, node: KNode, type: "parent" | "prevSibling" | "nextSibling") => KNode | null;
+/**
+ * 对编辑器内的某个节点执行合并操作，parent表示和父节点进行合并，prevSibling表示和前一个兄弟节点进行合并，nextSibling表示和下一个兄弟节点合并（可能会更新光标）
+ */
+export declare const applyMergeNode: (this: Editor, node: KNode, type: "parent" | "prevSibling" | "nextSibling") => void;
+/**
+ * 将编辑器内的某个非块级节点转为默认块级节点
+ */
+export declare const convertToBlock: (this: Editor, node: KNode) => void;
+/**
+ * 对节点数组使用指定规则进行格式化，nodes是需要格式化的节点数组，sourceNodes是格式化的节点所在的源数组
+ */
+export declare const formatNodes: (this: Editor, rule: RuleFunctionType, nodes: KNode[], sourceNodes: KNode[]) => void;
+/**
+ * 注册扩展
+ */
+export declare const registerExtension: (this: Editor, extension: Extension) => void;
+/**
+ * 根据真实光标更新selection，返回布尔值表示是否更新成功
+ */
+export declare const updateSelection: (this: Editor) => boolean;
+/**
+ * 纠正光标位置，返回布尔值表示是否存在纠正行为
+ */
+export declare const redressSelection: (this: Editor) => boolean;
+/**
+ * 初始化校验编辑器的节点数组，如果编辑器的节点数组为空或者都是空节点，则初始化创建一个只有占位符的段落
+ */
+export declare const checkNodes: (this: Editor) => void;
+/**
+ * 粘贴时对节点的标记和样式的保留处理
+ */
+export declare const handlerForPasteKeepMarksAndStyles: (this: Editor, nodes: KNode[]) => void;
+/**
+ * 粘贴时对文件的处理
+ */
+export declare const handlerForPasteFiles: (this: Editor, files: FileList) => Promise<void>;
+/**
+ * 处理某个节点数组，针对为空的块级节点补充占位符
+ */
+export declare const fillPlaceholderToEmptyBlock: (this: Editor, nodes: KNode[]) => void;
+/**
+ * 粘贴处理
+ */
+export declare const handlerForPasteDrop: (this: Editor, dataTransfer: DataTransfer) => Promise<void>;
+/**
+ * 将指定的非固定块节点从父节点（非固定块节点）中抽离，插入到和父节点同级的位置
+ */
+export declare const removeBlockFromParentToSameLevel: (this: Editor, node: KNode) => void;
+/**
+ * 光标所在的块节点不是只有占位，且非固定块节点，非代码块样式的块节点，在该块节点内正常换行方法
+ */
+export declare const handlerForNormalInsertParagraph: (this: Editor) => void;
+/**
+ * 设置placeholder，在每次视图更新时调用此方法
+ */
+export declare const setPlaceholder: (this: Editor) => void;
+/**
+ * 合并扩展数组（只能用在扩展注册之前）
+ */
+export declare const mergeExtensions: (this: Editor, from: Extension[]) => Extension[];

package/lib/model/index.d.ts

@@ -0,0 +1,6 @@
+export type * from './config/format-patch';
+export type * from './config/format-rules';
+export * from './Editor';
+export * from './History';
+export * from './KNode';
+export * from './Selection';

package/lib/tools/index.d.ts

@@ -0,0 +1,49 @@
+import { KNodeMarksType, KNodeStylesType } from '../model';
+/**
+ * 用于KNode生成唯一的key
+ */
+export declare const createUniqueKey: () => number;
+/**
+ * 用于编辑器生成唯一的guid
+ */
+export declare const createGuid: () => number;
+/**
+ * 判断字符串是否零宽度无断空白字符
+ */
+export declare const isZeroWidthText: (val: string) => boolean;
+/**
+ * 获取一个零宽度无断空白字符
+ */
+export declare const getZeroWidthText: () => string;
+/**
+ * 驼峰转中划线
+ */
+export declare const camelToKebab: (val: string) => string;
+/**
+ * 中划线转驼峰
+ */
+export declare const kebabToCamel: (val: string) => string;
+/**
+ * 获取dom元素的属性集合
+ */
+export declare const getDomAttributes: (dom: HTMLElement) => KNodeMarksType;
+/**
+ * 获取dom元素的样式集合
+ */
+export declare const getDomStyles: (dom: HTMLElement) => KNodeStylesType;
+/**
+ * 初始化编辑器dom
+ */
+export declare const initEditorDom: (dom: HTMLElement | string) => HTMLElement;
+/**
+ * 判断某个dom是否包含另一个dom
+ */
+export declare const isContains: (parent: Node, child: Node) => boolean;
+/**
+ * 延迟指定时间
+ */
+export declare const delay: (num?: number | undefined) => Promise<void>;
+/**
+ * 删除对象的某个属性
+ */
+export declare const deleteProperty: <T>(val: any, propertyName: string) => T;

package/lib/view/index.d.ts

@@ -0,0 +1,21 @@
+import { Editor, KNode, KNodeMarksType, KNodeStylesType } from '../model';
+/**
+ * 渲染参数类型
+ */
+export type KNodeRenderOptionType = {
+    key: number;
+    tag: string;
+    attrs: KNodeMarksType;
+    styles: KNodeStylesType;
+    namespace?: string;
+    textContent?: string;
+    children?: KNodeRenderOptionType[];
+};
+/**
+ * 节点渲染成dom后在dom上生成的一个特殊标记名称，它的值是节点的key值
+ */
+export declare const NODE_MARK = "kaitify-node";
+/**
+ * 获取节点的渲染参数
+ */
+export declare const getNodeRenderOptions: (editor: Editor, node: KNode) => KNodeRenderOptionType;

package/lib/view/js-render/dom-patch.d.ts

@@ -0,0 +1,65 @@
+import { KNode, KNodeMarksType, KNodeStylesType } from '../../model';
+/**
+ * 节点数组比对结果类型
+ */
+type NodePatchResultType = {
+    /**
+     * 差异类型：insert：插入节点；remove：移除节点；update：节点更新；replace：节点被替换；move：节点同级位置移动
+     */
+    type: 'insert' | 'remove' | 'update' | 'replace' | 'move';
+    /**
+     * 新节点
+     */
+    newNode: KNode | null;
+    /**
+     * 旧节点
+     */
+    oldNode: KNode | null;
+    /**
+     * 更新的字段
+     */
+    update?: 'textContent' | 'styles' | 'marks';
+};
+/**
+ * mark比对结果类型
+ */
+export type MarkPatchResultType = {
+    /**
+     * 新增和更新的标记
+     */
+    addMarks: KNodeMarksType;
+    /**
+     * 移除的标记
+     */
+    removeMarks: KNodeMarksType;
+};
+/**
+ * style比对结果类型
+ */
+export type StylePatchResultType = {
+    /**
+     * 新增和更新的样式
+     */
+    addStyles: KNodeStylesType;
+    /**
+     * 移除的样式
+     */
+    removeStyles: KNodeStylesType;
+};
+/**
+ * 获取两个节点上不相同的marks
+ */
+export declare const getDifferentMarks: (newNode: KNode, oldNode: KNode) => MarkPatchResultType;
+/**
+ * 获取两个节点上不相同的styles
+ */
+export declare const getDifferentStyles: (newNode: KNode, oldNode: KNode) => StylePatchResultType;
+/**
+ * 对新旧两个节点数组进行比对
+ */
+export declare const patchNodes: (newNodes: KNode[], oldNodes: (KNode | null)[]) => NodePatchResultType[];
+/**
+ * 对新旧两个节点进行比对
+ */
+export declare const patchNode: (newNode: KNode, oldNode: KNode) => NodePatchResultType[];
+export {};

package/lib/view/js-render/index.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from '../../model';
+/**
+ * 默认的原生js渲染编辑器视图层
+ */
+export declare const defaultUpdateView: (this: Editor, init: boolean) => void;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@kaitify/core",
+  "version": "0.0.1-beta.1",
+  "private": false,
+  "type": "module",
+  "author": "so-better",
+  "main": "lib/kaitify-core.umd.js",
+  "module": "lib/kaitify-core.es.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "description": "基于原生JS的富文本编辑器核心库",
+  "scripts": {
+    "dev": "vite",
+    "lib": "tsc && vite build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs"
+  },
+  "dependencies": {
+    "csstype": "^3.1.3",
+    "dap-util": "^1.5.8",
+    "highlight.js": "^11.10.0",
+    "interactjs": "^1.10.27",
+    "katex": "^0.16.11",
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@types/katex": "^0.16.7",
+    "@types/node": "^20.11.24",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "terser": "^5.16.9",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.3.0",
+    "vitepress": "^1.5.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/so-better/kaitify-core"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}