vue-editify 0.1.43 → 0.1.45

package/examples/App.vue

@@ -1,14 +1,51 @@
 <template>
 	<div style="padding: 10px; height: 100%; box-sizing: border-box">
+		<table>
+			<tbody>
+				<tr>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+				</tr>
+				<tr>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+				</tr>
+				<tr>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+				</tr>
+				<tr>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+				</tr>
+				<tr>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+					<td><br /></td>
+				</tr>
+			</tbody>
+		</table>
 		<Editify ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." :toolbar="toolbarConfig" locale="zh_CN" allow-paste-html :plugins="plugins" @rangeupdate="rangeupdate"></Editify>
 	</div>
 </template>
 <script setup lang="ts">
 import { h, ref } from 'vue'
 import { AlexElement, MenuConfigType, Editify, attachment, PluginType, mathformula, ToolbarConfigType, getMatchElementsByRange } from '../src/index'
-const val = ref<string>(
-	'<p><span>这是一个</span><a href="#" data-editify-element="41"><span>链接</span></a><span>文本这是一</span><span style="font-weight: bold;">个链接</span><span>文本</span></p><p><img src="https://www.ling0523.cn/images/image_0_1701871044625.jpg" data-editify-element="47"></p><p><span></span><video src="https://video.699pic.com/videos/92/12/46/b_zEMHgCfQS5fV1714921246.mp4" data-editify-element="50"></video><span></span></p><pre data-editify-element="52"><span class="editify-hljs-keyword">import</span><span> </span><span class="editify-hljs-title class_">AlexEditor</span><span> </span><span class="editify-hljs-keyword">from</span><span> </span><span class="editify-hljs-string">"alex-editor"</span></pre><table data-editify-element="60" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="50%"><col width="auto"><col width="auto"><col width="auto"><col width="auto"><col width="auto"></colgroup><tbody><tr><th rowspan="4">1</th><th>2</th><th rowspan="3">3</th><th>4</th><th>5</th><th>6</th></tr><tr><td rowspan="3"><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td colspan="2"><br></td></tr></tbody></table>'
-)
+const val = ref<string>('<img src="https://www.ling0523.cn/images/image_1_1701871044699.jpg" /><table><colgroup><col width="10000px" /><col/><col/><col/><col/></colgroup><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table>')
 
 const editify = ref<InstanceType<typeof Editify> | null>(null)
 const menuConfig = ref<MenuConfigType>({
@@ -57,4 +94,21 @@ body {
 	height: 100%;
 	overflow: auto;
 }
+
+table {
+	border: 1px solid #ccc;
+	width: 100%;
+	border-collapse: collapse;
+
+	tr,
+	td,
+	th {
+		border: 1px solid #ccc;
+	}
+
+	td {
+		text-align: center;
+		padding: 10px;
+	}
+}
 </style>

package/lib/core/function.d.ts

@@ -1,89 +1,129 @@
 import { AlexElement, AlexElementsRangeType, AlexEditor } from 'alex-editor';
 import { ObjectType } from './tool';
 
-export type ElementMatchConfig = {
+export type ElementMatchConfigType = {
     parsedom?: string;
     marks?: ObjectType;
     styles?: ObjectType;
 };
+export type CellMergeTypeResultType = {
+    crossRow: boolean;
+    crossColumn: boolean;
+    rowspan?: number;
+    colspan?: number;
+};
+/**
+ * 清空单元格的内容并隐藏
+ * @param editor
+ * @param cell
+ */
+export declare const setTableCellMerged: (cell: AlexElement) => void;
+/**
+ * 判断被隐藏的单元格是属于跨行的单元格还是跨列的单元格，返回跨行或者跨列的单元格
+ * @param editor
+ * @param cell
+ * @returns
+ */
+export declare const getCellMergeElement: (editor: AlexEditor, cell: AlexElement) => {
+    crossRowElement: AlexElement | null;
+    crossColumnElement: AlexElement | null;
+};
+/**
+ * 获取某个单元格的rowspan和colspan值
+ * @param cell
+ * @returns
+ */
+export declare const getCellSpanNumber: (cell: AlexElement) => {
+    rowspan: number;
+    colspan: number;
+};
+/**
+ * 获取表格规格：行数和列数
+ * @param rowElements
+ * @returns
+ */
+export declare const getTableSize: (rowElements: AlexElement[]) => {
+    rowNumber: number;
+    columnNumber: number;
+};
 /**
- * 判断元素是否符合指定的条件
+ * Open API：判断元素是否符合指定的条件
  * @param element
  * @param config
  * @returns
  */
-export declare const elementIsMatch: (element: AlexElement, config: ElementMatchConfig) => boolean;
+export declare const elementIsMatch: (element: AlexElement, config: ElementMatchConfigType) => boolean;
 /**
- * 判断元素是否在符合条件的元素下，如果是返回符合条件的元素，否则返回null
+ * Open API：判断元素是否在符合条件的元素下，如果是返回符合条件的元素，否则返回null
  * @param element
  * @param config
  * @returns
  */
-export declare const getMatchElementByElement: (element: AlexElement, config: ElementMatchConfig) => AlexElement | null;
+export declare const getMatchElementByElement: (element: AlexElement, config: ElementMatchConfigType) => AlexElement | null;
 /**
- * 判断光标范围内的元素是否在符合条件的元素下，如果是所有的返回符合条件的元素，否则返回[]
+ * Open API：判断光标范围内的元素是否在符合条件的元素下，如果是所有的返回符合条件的元素，否则返回[]
  * @param editor
  * @param dataRangeCaches
  * @param config
  * @returns
  */
-export declare const getMatchElementsByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfig) => AlexElement[];
+export declare const getMatchElementsByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfigType) => AlexElement[];
 /**
- * 判断元素是否在有序列表或者无序列表下
+ * Open API：判断元素是否在有序列表或者无序列表下
  * @param element
  * @param ordered
  * @returns
  */
 export declare const elementIsInList: (element: AlexElement, ordered: boolean) => boolean;
 /**
- * 判断元素是否在任务列表下
+ * Open API：判断元素是否在任务列表下
  * @param element
  * @returns
  */
 export declare const elementIsInTask: (element: AlexElement) => boolean;
 /**
- * 判断元素是否有序或者无序列表
+ * Open API：判断元素是否有序或者无序列表
  * @param element
  * @param ordered
  * @returns
  */
 export declare const isList: (element: AlexElement, ordered?: boolean | undefined) => boolean;
 /**
- * 判断元素是否任务列表
+ * Open API：判断元素是否任务列表
  * @param element
  * @returns
  */
 export declare const isTask: (element: AlexElement) => boolean;
 /**
- * 选区是否含有代码块
+ * Open API：选区是否含有代码块
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const hasPreInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否全部在代码块内
+ * Open API：选区是否全部在代码块内
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const isRangeInPre: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否含有引用
+ * Open API：选区是否含有引用
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const hasQuoteInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否全部在引用内
+ * Open API：选区是否全部在引用内
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const isRangeInQuote: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否含有有序列表或者无序列表
+ * Open API：选区是否含有有序列表或者无序列表
  * @param editor
  * @param dataRangeCaches
  * @param ordered
@@ -91,7 +131,7 @@ export declare const isRangeInQuote: (editor: AlexEditor, dataRangeCaches: AlexE
  */
 export declare const hasListInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered?: boolean | undefined) => boolean;
 /**
- * 选区是否全部在有序列表或者无序列表内
+ * Open API：选区是否全部在有序列表或者无序列表内
  * @param editor
  * @param dataRangeCaches
  * @param ordered
@@ -99,49 +139,49 @@ export declare const hasListInRange: (editor: AlexEditor, dataRangeCaches: AlexE
  */
 export declare const isRangeInList: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered?: boolean | undefined) => boolean;
 /**
- * 选区是否含有任务列表
+ * Open API：选区是否含有任务列表
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const hasTaskInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否全部在任务列表里
+ * Open API：选区是否全部在任务列表里
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const isRangeInTask: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否含有链接
+ * Open API：选区是否含有链接
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const hasLinkInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否含有表格
+ * Open API：选区是否含有表格
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const hasTableInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否含有图片
+ * Open API：选区是否含有图片
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const hasImageInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 选区是否含有视频
+ * Open API：选区是否含有视频
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const hasVideoInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * 查询光标所在的文本元素是否具有某个样式
+ * Open API：查询光标所在的文本元素是否具有某个样式
  * @param editor
  * @param dataRangeCaches
  * @param name
@@ -150,7 +190,7 @@ export declare const hasVideoInRange: (editor: AlexEditor, dataRangeCaches: Alex
  */
 export declare const queryTextStyle: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, name: string, value?: string | number) => boolean;
 /**
- * 查询光标所在的文本元素是否具有某个标记
+ * Open API：查询光标所在的文本元素是否具有某个标记
  * @param editor
  * @param dataRangeCaches
  * @param name
@@ -159,7 +199,7 @@ export declare const queryTextStyle: (editor: AlexEditor, dataRangeCaches: AlexE
  */
 export declare const queryTextMark: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, name: string, value?: string | number) => boolean;
 /**
- * 获取选区内的文字内容，用于预置链接文字
+ * Open API：获取选区内的文字内容，用于预置链接文字
  * @param dataRangeCaches
  * @returns
  */
@@ -199,28 +239,28 @@ export declare const elementToTask: (element: AlexElement) => void;
  */
 export declare const setHeading: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, editTrans: (key: string) => any, parsedom: string) => void;
 /**
- * 根级块元素或者内部块元素增加缩进
+ * Open API：根级块元素或者内部块元素增加缩进
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const setIndentIncrease: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
 /**
- * 根级块元素或者内部块元素减少缩进
+ * Open API：根级块元素或者内部块元素减少缩进
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const setIndentDecrease: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
 /**
- * 插入或者取消引用
+ * Open API：插入或者取消引用
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const setQuote: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
 /**
- * 设置对齐方式，参数取值justify/left/right/center
+ * Open API：设置对齐方式，参数取值justify/left/right/center
  * @param editor
  * @param dataRangeCaches
  * @param value
@@ -228,7 +268,7 @@ export declare const setQuote: (editor: AlexEditor, dataRangeCaches: AlexElement
  */
 export declare const setAlign: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, value: string) => void;
 /**
- * 插入或者取消 有序或者无序列表 ordered为true表示有序列表
+ * Open API：插入或者取消 有序或者无序列表 ordered为true表示有序列表
  * @param editor
  * @param dataRangeCaches
  * @param ordered
@@ -236,14 +276,14 @@ export declare const setAlign: (editor: AlexEditor, dataRangeCaches: AlexElement
  */
 export declare const setList: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean) => void;
 /**
- * 插入或者取消任务列表
+ * Open API：插入或者取消任务列表
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const setTask: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
 /**
- * 设置文本元素的样式，styles为{ 'font-weight':'bold' }这类格式
+ * Open API：设置文本元素的样式，styles为{ 'font-weight':'bold' }这类格式
  * @param editor
  * @param dataRangeCaches
  * @param styles
@@ -251,7 +291,7 @@ export declare const setTask: (editor: AlexEditor, dataRangeCaches: AlexElements
  */
 export declare const setTextStyle: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, styles: ObjectType) => void;
 /**
- * 设置文本元素的标记，marks为{ 'class':'a' }这类格式
+ * Open API：设置文本元素的标记，marks为{ 'class':'a' }这类格式
  * @param editor
  * @param dataRangeCaches
  * @param marks
@@ -259,7 +299,7 @@ export declare const setTextStyle: (editor: AlexEditor, dataRangeCaches: AlexEle
  */
 export declare const setTextMark: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, marks: ObjectType) => void;
 /**
- * 移除文本元素的样式，styleNames是样式名称数组，如果不存在则移除全部样式
+ * Open API：移除文本元素的样式，styleNames是样式名称数组，如果不存在则移除全部样式
  * @param editor
  * @param dataRangeCaches
  * @param styleNames
@@ -267,7 +307,7 @@ export declare const setTextMark: (editor: AlexEditor, dataRangeCaches: AlexElem
  */
 export declare const removeTextStyle: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, styleNames?: string[]) => void;
 /**
- * 移除文本元素的标记，markNames是标记名称数组，如果不存在则移除全部标记
+ * Open API：移除文本元素的标记，markNames是标记名称数组，如果不存在则移除全部标记
  * @param editor
  * @param dataRangeCaches
  * @param markNames
@@ -275,7 +315,7 @@ export declare const removeTextStyle: (editor: AlexEditor, dataRangeCaches: Alex
  */
 export declare const removeTextMark: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, markNames?: string[]) => void;
 /**
- * 设置块元素或者根级块元素的行高
+ * Open API：设置块元素或者根级块元素的行高
  * @param editor
  * @param dataRangeCaches
  * @param value
@@ -283,7 +323,7 @@ export declare const removeTextMark: (editor: AlexEditor, dataRangeCaches: AlexE
  */
 export declare const setLineHeight: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, value: string | number) => void;
 /**
- * 插入链接
+ * Open API：插入链接
  * @param editor
  * @param text
  * @param url
@@ -292,21 +332,21 @@ export declare const setLineHeight: (editor: AlexEditor, dataRangeCaches: AlexEl
  */
 export declare const insertLink: (editor: AlexEditor, text: string, url: string, newOpen: boolean) => void;
 /**
- * 插入图片
+ * Open API：插入图片
  * @param editor
  * @param value
  * @returns
  */
 export declare const insertImage: (editor: AlexEditor, value: string) => void;
 /**
- * 插入视频
+ * Open API：插入视频
  * @param editor
  * @param value
  * @returns
  */
 export declare const insertVideo: (editor: AlexEditor, value: string) => void;
 /**
- * 插入表格
+ * Open API：插入表格
  * @param editor
  * @param rowLength
  * @param colLength
@@ -314,14 +354,14 @@ export declare const insertVideo: (editor: AlexEditor, value: string) => void;
  */
 export declare const insertTable: (editor: AlexEditor, rowLength: number, colLength: number) => void;
 /**
- * 插入或者取消代码块
+ * Open API：插入或者取消代码块
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
 export declare const insertCodeBlock: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
 /**
- * 插入分隔线
+ * Open API：插入分隔线
  * @param editor
  * @param dataRangeCaches
  * @returns

package/lib/core/rule.d.ts

@@ -20,11 +20,23 @@ export declare const orderdListHandle: (editor: AlexEditor, element: AlexElement
  */
 export declare const commonElementHandle: (editor: AlexEditor, element: AlexElement) => void;
 /**
- * 元素格式化时处理表格
+ * 元素格式化时处理表格：th转为td
  * @param editor
  * @param element
  */
-export declare const tableHandle: (editor: AlexEditor, element: AlexElement) => void;
+export declare const tableThTdHandle: (_editor: AlexEditor, element: AlexElement) => void;
+/**
+ * 元素格式化时处理表格：格式化表格
+ * @param editor
+ * @param element
+ */
+export declare const tableFormatHandle: (editor: AlexEditor, element: AlexElement) => void;
+/**
+ * 元素格式化时处理表格：处理光标在表格隐藏单元格内的情况
+ * @param editor
+ * @param element
+ */
+export declare const tableRangeMergedHandle: (editor: AlexEditor, element: AlexElement) => void;
 /**
  * 元素格式化时处理pre，将pre的内容根据语言进行样式处理
  * @param editor

package/lib/editify/editify.vue.d.ts

@@ -441,7 +441,7 @@ declare const _default: import('vue').DefineComponent<{
         insertElement: (ele: AlexElement, cover?: boolean | undefined) => void;
         formatElementStack: () => void;
         domRender: (unPushHistory?: boolean | undefined) => void;
-        rangeRender: () => void;
+        rangeRender: () => Promise<void>;
         parseHtml: (html: string) => AlexElement[];
         parseNode: (node: HTMLElement) => AlexElement;
         merge: (ele: AlexElement, previousEle: AlexElement) => void;

package/lib/editify/props.d.ts

@@ -3,7 +3,7 @@ import { PluginType, MenuConfigType, ObjectType, ToolbarConfigType } from '../co
 import { AlexElement } from 'alex-editor';
 import { LocaleType } from '../locale';
 
-export type EditifyTableColumnResizeParamsType = {
+export type EditifyResizeParamsType = {
     element: AlexElement | null;
     start: number;
 };