vue-editify 0.1.47 → 0.1.49

package/examples/App.vue

@@ -1,51 +1,13 @@
 <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>
+		<button @click="setStart">setStart</button>
+		<Editify color="#1098f3" 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>('<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>')
+import { h, onMounted, ref } from 'vue'
+import { AlexElement, MenuConfigType, Editify, attachment, PluginType, mathformula, ToolbarConfigType, getMatchElementByRange, panel, elementIsMatch, infoBlock } from '../src/index'
+const val = ref<string>('33<div data-editify-info="true">4444</div>3333<div data-editify-panel="true"><div>标题</div><div>这是一个面板</div></div>333')
 
 const editify = ref<InstanceType<typeof Editify> | null>(null)
 const menuConfig = ref<MenuConfigType>({
@@ -66,19 +28,36 @@ const toolbarConfig = ref<ToolbarConfigType>({
 })
 
 const plugins = ref<PluginType[]>([
-	attachment({
+	panel(),
+	mathformula(),
+	attachment(),
+	infoBlock({
 		leftBorder: true
-	}),
-	mathformula()
+	})
 ])
 
-const rangeupdate = () => {
-	const elements = getMatchElementsByRange(editify.value!.editor!, editify.value!.dataRangeCaches, {
-		styles: {
-			'font-weight': 'bold'
+const setStart = () => {
+	editify.value!.editor!.range!.anchor.moveToStart(editify.value!.editor!.stack[0])
+	editify.value!.editor!.range!.focus.moveToStart(editify.value!.editor!.stack[0])
+	editify.value!.editor!.rangeRender()
+}
+
+const rangeUpdate = () => {
+	const element = getMatchElementByRange(editify.value!.editor!, editify.value!.dataRangeCaches, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-task': true
 		}
 	})
-	console.log(elements)
+	if (element) {
+		console.log(
+			elementIsMatch(element, {
+				marks: {
+					'data-editify-task': true
+				}
+			})
+		)
+	}
 }
 </script>
 <style lang="less">

package/lib/core/function.d.ts

@@ -6,12 +6,6 @@ export type ElementMatchConfigType = {
     marks?: ObjectType;
     styles?: ObjectType;
 };
-export type CellMergeTypeResultType = {
-    crossRow: boolean;
-    crossColumn: boolean;
-    rowspan?: number;
-    colspan?: number;
-};
 /**
  * 清空单元格的内容并隐藏
  * @param editor
@@ -61,39 +55,39 @@ export declare const elementIsMatch: (element: AlexElement, config: ElementMatch
  */
 export declare const getMatchElementByElement: (element: AlexElement, config: ElementMatchConfigType) => AlexElement | null;
 /**
- * Open API：判断光标范围内的元素是否在符合条件的元素下，如果是所有的返回符合条件的元素，否则返回[]
+ * Open API：判断光标范围内的元素是否在同一个符合条件的元素下，如果是返回那个符合条件的元素，否则返回null
  * @param editor
  * @param dataRangeCaches
  * @param config
  * @returns
  */
-export declare const getMatchElementsByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfigType) => AlexElement[];
+export declare const getMatchElementByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfigType) => AlexElement | null;
 /**
- * Open API：判断元素是否在有序列表或者无序列表下
+ * Open API：判断元素是否有序或者无序列表
  * @param element
  * @param ordered
  * @returns
  */
-export declare const elementIsInList: (element: AlexElement, ordered: boolean) => boolean;
+export declare const isList: (element: AlexElement, ordered?: boolean | undefined) => boolean;
 /**
- * Open API：判断元素是否在任务列表下
+ * Open API：判断元素是否任务列表
  * @param element
  * @returns
  */
-export declare const elementIsInTask: (element: AlexElement) => boolean;
+export declare const isTask: (element: AlexElement) => boolean;
 /**
- * Open API：判断元素是否有序或者无序列表
+ * Open API：判断元素是否在有序列表或者无序列表下
  * @param element
  * @param ordered
  * @returns
  */
-export declare const isList: (element: AlexElement, ordered?: boolean | undefined) => boolean;
+export declare const elementIsInList: (element: AlexElement, ordered: boolean) => boolean;
 /**
- * Open API：判断元素是否任务列表
+ * Open API：判断元素是否在任务列表下
  * @param element
  * @returns
  */
-export declare const isTask: (element: AlexElement) => boolean;
+export declare const elementIsInTask: (element: AlexElement) => boolean;
 /**
  * Open API：选区是否含有代码块
  * @param editor
@@ -101,13 +95,6 @@ export declare const isTask: (element: AlexElement) => boolean;
  * @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
@@ -116,70 +103,70 @@ export declare const isRangeInPre: (editor: AlexEditor, dataRangeCaches: AlexEle
  */
 export declare const hasQuoteInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * Open API：选区是否全部在引用内
+ * Open API：选区是否含有有序列表或者无序列表
  * @param editor
  * @param dataRangeCaches
+ * @param ordered
  * @returns
  */
-export declare const isRangeInQuote: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
+export declare const hasListInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered?: boolean | undefined) => boolean;
 /**
- * Open API：选区是否含有有序列表或者无序列表
+ * Open API：选区是否含有任务列表
  * @param editor
  * @param dataRangeCaches
- * @param ordered
  * @returns
  */
-export declare const hasListInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered?: boolean | undefined) => boolean;
+export declare const hasTaskInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * Open API：选区是否全部在有序列表或者无序列表内
+ * Open API：选区是否含有链接
  * @param editor
  * @param dataRangeCaches
- * @param ordered
  * @returns
  */
-export declare const isRangeInList: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered?: boolean | undefined) => boolean;
+export declare const hasLinkInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * Open API：选区是否含有任务列表
+ * Open API：选区是否含有表格
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export declare const hasTaskInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
+export declare const hasTableInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * Open API：选区是否全部在任务列表里
+ * Open API：选区是否含有图片
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export declare const isRangeInTask: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
+export declare const hasImageInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * Open API：选区是否含有链接
+ * Open API：选区是否含有视频
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export declare const hasLinkInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
+export declare const hasVideoInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * Open API：选区是否含有表格
+ * Open API：选区是否全部在引用内
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export declare const hasTableInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
+export declare const isRangeInQuote: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
- * Open API：选区是否含有图片
+ * Open API：选区是否全部在有序列表或者无序列表内
  * @param editor
  * @param dataRangeCaches
+ * @param ordered
  * @returns
  */
-export declare const hasImageInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
+export declare const isRangeInList: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered?: boolean | undefined) => boolean;
 /**
- * Open API：选区是否含有视频
+ * Open API：选区是否全部在任务列表里
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export declare const hasVideoInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
+export declare const isRangeInTask: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
 /**
  * Open API：查询光标所在的文本元素是否具有某个样式
  * @param editor
@@ -260,18 +247,18 @@ export declare const setIndentDecrease: (editor: AlexEditor, dataRangeCaches: Al
  */
 export declare const setQuote: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
 /**
- * Open API：设置对齐方式，参数取值justify/left/right/center
+ * Open API：设置对齐方式
  * @param editor
  * @param dataRangeCaches
- * @param value
+ * @param value 取值justify/left/right/center
  * @returns
  */
-export declare const setAlign: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, value: string) => void;
+export declare const setAlign: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, value: 'justify' | 'left' | 'right' | 'center') => void;
 /**
- * Open API：插入或者取消 有序或者无序列表 ordered为true表示有序列表
+ * Open API：插入或者取消 有序或者无序列表
  * @param editor
  * @param dataRangeCaches
- * @param ordered
+ * @param ordered 为true表示有序列表
  * @returns
  */
 export declare const setList: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean) => void;
@@ -283,34 +270,34 @@ export declare const setList: (editor: AlexEditor, dataRangeCaches: AlexElements
  */
 export declare const setTask: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
 /**
- * Open API：设置文本元素的样式，styles为{ 'font-weight':'bold' }这类格式
+ * Open API：设置文本元素的样式
  * @param editor
  * @param dataRangeCaches
- * @param styles
+ * @param styles 值为{ 'font-weight':'bold' }这类格式
  * @returns
  */
 export declare const setTextStyle: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, styles: ObjectType) => void;
 /**
- * Open API：设置文本元素的标记，marks为{ 'class':'a' }这类格式
+ * Open API：设置文本元素的标记
  * @param editor
  * @param dataRangeCaches
- * @param marks
+ * @param marks 值为{ 'class':'a' }这类格式
  * @returns
  */
 export declare const setTextMark: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, marks: ObjectType) => void;
 /**
- * Open API：移除文本元素的样式，styleNames是样式名称数组，如果不存在则移除全部样式
+ * Open API：移除文本元素的样式
  * @param editor
  * @param dataRangeCaches
- * @param styleNames
+ * @param styleNames 样式名称数组，如果不存在则移除全部样式
  * @returns
  */
 export declare const removeTextStyle: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, styleNames?: string[]) => void;
 /**
- * Open API：移除文本元素的标记，markNames是标记名称数组，如果不存在则移除全部标记
+ * Open API：移除文本元素的标记
  * @param editor
  * @param dataRangeCaches
- * @param markNames
+ * @param markNames 标记名称数组，如果不存在则移除全部标记
  * @returns
  */
 export declare const removeTextMark: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, markNames?: string[]) => void;
@@ -325,31 +312,31 @@ export declare const setLineHeight: (editor: AlexEditor, dataRangeCaches: AlexEl
 /**
  * Open API：插入链接
  * @param editor
- * @param text
- * @param url
- * @param newOpen
+ * @param text 链接名称
+ * @param url 链接地址
+ * @param newOpen 是否新窗口打开
  * @returns
  */
 export declare const insertLink: (editor: AlexEditor, text: string, url: string, newOpen: boolean) => void;
 /**
  * Open API：插入图片
  * @param editor
- * @param value
+ * @param value 图片地址
  * @returns
  */
 export declare const insertImage: (editor: AlexEditor, value: string) => void;
 /**
  * Open API：插入视频
  * @param editor
- * @param value
+ * @param value 视频地址
  * @returns
  */
 export declare const insertVideo: (editor: AlexEditor, value: string) => void;
 /**
  * Open API：插入表格
  * @param editor
- * @param rowLength
- * @param colLength
+ * @param rowLength 表格行数
+ * @param colLength 表格列数
  * @returns
  */
 export declare const insertTable: (editor: AlexEditor, rowLength: number, colLength: number) => void;