vue-editify 0.1.40 → 0.1.42

package/examples/App.vue

@@ -1,12 +1,14 @@
 <template>
 	<div style="padding: 10px; height: 100%; box-sizing: border-box">
-		<Editify ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." locale="zh_CN" allow-paste-html :plugins="plugins"></Editify>
+		<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 } from '../src/index'
-const val = ref<string>('<p><br></p>')
+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 editify = ref<InstanceType<typeof Editify> | null>(null)
 const menuConfig = ref<MenuConfigType>({
@@ -22,13 +24,25 @@ const menuConfig = ref<MenuConfigType>({
 		show: true
 	}
 })
+const toolbarConfig = ref<ToolbarConfigType>({
+	use: true
+})
 
 const plugins = ref<PluginType[]>([
-	attachment(),
-	mathformula({
+	attachment({
 		leftBorder: true
-	})
+	}),
+	mathformula()
 ])
+
+const rangeupdate = () => {
+	const elements = getMatchElementsByRange(editify.value!.editor!, editify.value!.dataRangeCaches, {
+		styles: {
+			'font-weight': 'bold'
+		}
+	})
+	console.log(elements)
+}
 </script>
 <style lang="less">
 html,

package/lib/core/function.d.ts

@@ -1,21 +1,33 @@
 import { AlexElement, AlexElementsRangeType, AlexEditor } from 'alex-editor';
 import { ObjectType } from './tool';
 
+export type ElementMatchConfig = {
+    parsedom?: string;
+    marks?: ObjectType;
+    styles?: ObjectType;
+};
 /**
- * 判断元素是否在某个标签下，如果是返回该标签对应的元素，否则返回null
+ * 判断元素是否符合指定的条件
  * @param element
- * @param parsedom
+ * @param config
+ * @returns
+ */
+export declare const elementIsMatch: (element: AlexElement, config: ElementMatchConfig) => boolean;
+/**
+ * 判断元素是否在符合条件的元素下，如果是返回符合条件的元素，否则返回null
+ * @param element
+ * @param config
  * @returns
  */
-export declare const getParsedomElementByElement: (element: AlexElement, parsedom: string) => AlexElement | null;
+export declare const getMatchElementByElement: (element: AlexElement, config: ElementMatchConfig) => AlexElement | null;
 /**
- * 获取光标是否在指定标签下，如果是返回该标签对应的元素，否则返回null
+ * 判断光标范围内的元素是否在符合条件的元素下，如果是所有的返回符合条件的元素，否则返回[]
  * @param editor
  * @param dataRangeCaches
- * @param parsedom
+ * @param config
  * @returns
  */
-export declare const getCurrentParsedomElement: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, parsedom: string) => AlexElement | null;
+export declare const getMatchElementsByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfig) => AlexElement[];
 /**
  * 判断元素是否在有序列表或者无序列表下
  * @param element

package/lib/core/tool.d.ts

@@ -214,12 +214,6 @@ export declare const queryHasValue: (obj: ObjectType, name: string, value?: stri
  * @returns
  */
 export declare const cloneData: (data: any) => any;
-/**
- * 根据行元素获取colgroup的col数量
- * @param row
- * @returns
- */
-export declare const getColNumbers: (row: AlexElement) => number;
 /**
  * 获取菜单按钮列表数据配置
  * @param editTrans