vue-editify 0.1.33 → 0.1.35

Sign up to get free protection for your applications and to get access to all the features.
package/examples/App.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  <script setup lang="ts">
7
7
  import { h, ref } from 'vue'
8
8
  import { AlexElement, MenuConfigType, Editify, attachment, PluginType } from '../src/index'
9
- const val = ref<string>('<p><br></p>')
9
+ const val = ref<string>('<p><code>444</code></p>')
10
10
  const editify = ref<InstanceType<typeof Editify> | null>(null)
11
11
  const menuConfig = ref<MenuConfigType>({
12
12
  use: true,
package/lib/editify.es.js CHANGED
@@ -2680,7 +2680,11 @@ const doPaste = async function(html, text, files) {
2680
2680
  await this.customHtmlPaste.apply(this, [elements, html]);
2681
2681
  } else {
2682
2682
  for (let i = 0; i < elements.length; i++) {
2683
- this.insertElement(elements[i], false);
2683
+ if (i == 0) {
2684
+ this.insertElement(elements[i]);
2685
+ } else {
2686
+ this.insertElement(elements[i], false);
2687
+ }
2684
2688
  }
2685
2689
  this.emit("pasteHtml", elements, html);
2686
2690
  }
@@ -3927,6 +3931,9 @@ class AlexEditor {
3927
3931
  if (parsedom == "style" || parsedom == "meta" || parsedom == "script" || parsedom == "link") {
3928
3932
  return new AlexElement("text", null, null, null, null);
3929
3933
  }
3934
+ if (parsedom == AlexElement.TEXT_NODE && Array.from(node.childNodes).every((childNode) => childNode.nodeType == 3)) {
3935
+ return new AlexElement("text", null, marks, styles, node.textContent);
3936
+ }
3930
3937
  const block = blockParse.find((item) => item.parsedom == parsedom);
3931
3938
  const inblock = inblockParse.find((item) => item.parsedom == parsedom);
3932
3939
  const inline = inlineParse.find((item) => item.parsedom == parsedom);
@@ -4206,23 +4213,6 @@ class AlexEditor {
4206
4213
  flatList: []
4207
4214
  };
4208
4215
  }
4209
- if (this.range.anchor.element.isEqual(this.range.focus.element)) {
4210
- const isCover = this.range.anchor.offset == 0 && this.range.focus.offset == (this.range.anchor.element.isText() ? this.range.anchor.element.textContent.length : 1);
4211
- return {
4212
- list: [
4213
- {
4214
- element: this.range.anchor.element,
4215
- offset: isCover ? false : [this.range.anchor.offset, this.range.focus.offset]
4216
- }
4217
- ],
4218
- flatList: [
4219
- {
4220
- element: this.range.anchor.element,
4221
- offset: isCover ? false : [this.range.anchor.offset, this.range.focus.offset]
4222
- }
4223
- ]
4224
- };
4225
- }
4226
4216
  const getFlatList = () => {
4227
4217
  let flatList = [];
4228
4218
  const anchorInStart = this.range.anchor.offset == 0;
@@ -4238,60 +4228,78 @@ class AlexEditor {
4238
4228
  if (startIndex > 0 || endIndex < elements.length - 1) {
4239
4229
  elements = elements.slice(startIndex, endIndex + 1);
4240
4230
  }
4241
- const length = elements.length;
4242
- for (let i = 0; i < length; i++) {
4243
- if (this.range.anchor.element.isEqual(elements[i])) {
4244
- if (anchorInStart) {
4245
- flatList.push({
4246
- element: this.range.anchor.element,
4231
+ if (this.range.anchor.element.isEqual(this.range.focus.element)) {
4232
+ if (anchorInStart && focusInEnd) {
4233
+ flatList = elements.map((element2) => {
4234
+ return {
4235
+ element: element2,
4247
4236
  offset: false
4248
- });
4249
- } else if (this.range.anchor.element.isText() && this.range.anchor.offset < this.range.anchor.element.textContent.length) {
4250
- flatList.push({
4237
+ };
4238
+ });
4239
+ } else {
4240
+ flatList = [
4241
+ {
4251
4242
  element: this.range.anchor.element,
4252
- offset: [this.range.anchor.offset, this.range.anchor.element.textContent.length]
4253
- });
4254
- }
4255
- } else if (elements[i].isContains(this.range.anchor.element)) {
4256
- const isFirst = this.range.anchor.element.isFirst(elements[i]);
4257
- const hasFocus = elements[i].isContains(this.range.focus.element);
4258
- const isLast = this.range.focus.element.isLast(elements[i]);
4259
- if (anchorInStart && isFirst && hasFocus && isLast && focusInEnd) {
4260
- flatList.push({
4261
- element: elements[i],
4262
- offset: false
4263
- });
4264
- } else if (anchorInStart && isFirst && !hasFocus) {
4265
- flatList.push({
4266
- element: elements[i],
4267
- offset: false
4268
- });
4269
- }
4270
- } else if (this.range.focus.element.isEqual(elements[i])) {
4271
- if (focusInEnd) {
4272
- flatList.push({
4273
- element: this.range.focus.element,
4274
- offset: false
4275
- });
4276
- } else if (this.range.focus.offset > 0) {
4277
- flatList.push({
4278
- element: this.range.focus.element,
4279
- offset: [0, this.range.focus.offset]
4280
- });
4281
- }
4282
- } else if (elements[i].isContains(this.range.focus.element)) {
4283
- const isLast = this.range.focus.element.isLast(elements[i]);
4284
- if (isLast && focusInEnd) {
4243
+ offset: [this.range.anchor.offset, this.range.focus.offset]
4244
+ }
4245
+ ];
4246
+ }
4247
+ } else {
4248
+ const length = elements.length;
4249
+ for (let i = 0; i < length; i++) {
4250
+ if (this.range.anchor.element.isEqual(elements[i])) {
4251
+ if (anchorInStart) {
4252
+ flatList.push({
4253
+ element: this.range.anchor.element,
4254
+ offset: false
4255
+ });
4256
+ } else if (this.range.anchor.element.isText() && this.range.anchor.offset < this.range.anchor.element.textContent.length) {
4257
+ flatList.push({
4258
+ element: this.range.anchor.element,
4259
+ offset: [this.range.anchor.offset, this.range.anchor.element.textContent.length]
4260
+ });
4261
+ }
4262
+ } else if (elements[i].isContains(this.range.anchor.element)) {
4263
+ const isFirst = this.range.anchor.element.isFirst(elements[i]);
4264
+ const hasFocus = elements[i].isContains(this.range.focus.element);
4265
+ const isLast = this.range.focus.element.isLast(elements[i]);
4266
+ if (anchorInStart && isFirst && hasFocus && isLast && focusInEnd) {
4267
+ flatList.push({
4268
+ element: elements[i],
4269
+ offset: false
4270
+ });
4271
+ } else if (anchorInStart && isFirst && !hasFocus) {
4272
+ flatList.push({
4273
+ element: elements[i],
4274
+ offset: false
4275
+ });
4276
+ }
4277
+ } else if (this.range.focus.element.isEqual(elements[i])) {
4278
+ if (focusInEnd) {
4279
+ flatList.push({
4280
+ element: this.range.focus.element,
4281
+ offset: false
4282
+ });
4283
+ } else if (this.range.focus.offset > 0) {
4284
+ flatList.push({
4285
+ element: this.range.focus.element,
4286
+ offset: [0, this.range.focus.offset]
4287
+ });
4288
+ }
4289
+ } else if (elements[i].isContains(this.range.focus.element)) {
4290
+ const isLast = this.range.focus.element.isLast(elements[i]);
4291
+ if (isLast && focusInEnd) {
4292
+ flatList.push({
4293
+ element: elements[i],
4294
+ offset: false
4295
+ });
4296
+ }
4297
+ } else {
4285
4298
  flatList.push({
4286
4299
  element: elements[i],
4287
4300
  offset: false
4288
4301
  });
4289
4302
  }
4290
- } else {
4291
- flatList.push({
4292
- element: elements[i],
4293
- offset: false
4294
- });
4295
4303
  }
4296
4304
  }
4297
4305
  return flatList;
@@ -4512,7 +4520,7 @@ class AlexEditor {
4512
4520
  event$1.off(this.$el, "beforeinput.alex_editor compositionstart.alex_editor compositionupdate.alex_editor compositionend.alex_editor keydown.alex_editor cut.alex_editor paste.alex_editor copy.alex_editor dragstart.alex_editor drop.alex_editor focus.alex_editor blur.alex_editor");
4513
4521
  }
4514
4522
  }
4515
- const version$2 = "1.3.33";
4523
+ const version$2 = "1.3.35";
4516
4524
  console.log(`%c alex-editor %c v${version$2} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
4517
4525
  const number = {
4518
4526
  /**
@@ -17861,7 +17869,8 @@ const pasteKeepData = {
17861
17869
  //粘贴html时非文本元素保留的样式
17862
17870
  styles: {
17863
17871
  "text-indent": "*",
17864
- "text-align": "*"
17872
+ "text-align": "*",
17873
+ "line-height": "*"
17865
17874
  }
17866
17875
  };
17867
17876
  const mergeObject = function(o1, o2) {
@@ -23003,16 +23012,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
23003
23012
  filterFiles.push(file2);
23004
23013
  }
23005
23014
  if (filterFiles.length) {
23006
- let images = [];
23015
+ let urls = [];
23007
23016
  if (typeof props.customUpload == "function") {
23008
- images = await props.customUpload(filterFiles) || [];
23017
+ urls = await props.customUpload(filterFiles) || [];
23009
23018
  } else {
23010
23019
  for (let i = 0; i < filterFiles.length; i++) {
23011
23020
  const url = await file.dataFileToBase64(filterFiles[i]);
23012
- images.push(url);
23021
+ urls.push(url);
23013
23022
  }
23014
23023
  }
23015
- emits("insert", images);
23024
+ emits("insert", urls);
23016
23025
  }
23017
23026
  inputEle.value = "";
23018
23027
  };
@@ -23073,7 +23082,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
23073
23082
  };
23074
23083
  }
23075
23084
  });
23076
- const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1d6646fd"]]);
23085
+ const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b63a5bff"]]);
23077
23086
  const InsertVideoProps = {
23078
23087
  //主题色
23079
23088
  color: {
@@ -23198,16 +23207,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
23198
23207
  filterFiles.push(file2);
23199
23208
  }
23200
23209
  if (filterFiles.length) {
23201
- let videos = [];
23210
+ let urls = [];
23202
23211
  if (typeof props.customUpload == "function") {
23203
- videos = await props.customUpload(filterFiles) || [];
23212
+ urls = await props.customUpload(filterFiles) || [];
23204
23213
  } else {
23205
23214
  for (let i = 0; i < filterFiles.length; i++) {
23206
23215
  const url = await file.dataFileToBase64(filterFiles[i]);
23207
- videos.push(url);
23216
+ urls.push(url);
23208
23217
  }
23209
23218
  }
23210
- emits("insert", videos);
23219
+ emits("insert", urls);
23211
23220
  }
23212
23221
  inputEle.value = "";
23213
23222
  };
@@ -23268,7 +23277,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
23268
23277
  };
23269
23278
  }
23270
23279
  });
23271
- const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-46f99390"]]);
23280
+ const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4383bae9"]]);
23272
23281
  const InsertTableProps = {
23273
23282
  //主题色
23274
23283
  color: {
@@ -25487,28 +25496,34 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
25487
25496
  AlexElement.flatElements(elements).forEach((el) => {
25488
25497
  let marks = {};
25489
25498
  let styles = {};
25490
- if (el.hasMarks()) {
25491
- for (let key in keepMarks) {
25492
- if (el.marks.hasOwnProperty(key) && (Array.isArray(keepMarks[key]) && keepMarks[key].includes(el.parsedom) || keepMarks[key] == "*")) {
25493
- marks[key] = el.marks[key];
25499
+ if (!el.isText()) {
25500
+ if (el.hasMarks()) {
25501
+ for (let key in keepMarks) {
25502
+ if (el.marks.hasOwnProperty(key) && (Array.isArray(keepMarks[key]) && keepMarks[key].includes(el.parsedom) || keepMarks[key] == "*")) {
25503
+ marks[key] = el.marks[key];
25504
+ }
25494
25505
  }
25506
+ el.marks = marks;
25495
25507
  }
25496
- el.marks = marks;
25497
- }
25498
- if (el.hasStyles() && !el.isText()) {
25499
- for (let key in keepStyles) {
25500
- if (el.styles.hasOwnProperty(key) && (Array.isArray(keepStyles[key]) && keepStyles[key].includes(el.parsedom) || keepStyles[key] == "*")) {
25501
- styles[key] = el.styles[key];
25508
+ if (el.hasStyles()) {
25509
+ for (let key in keepStyles) {
25510
+ if (el.styles.hasOwnProperty(key) && (Array.isArray(keepStyles[key]) && keepStyles[key].includes(el.parsedom) || keepStyles[key] == "*")) {
25511
+ styles[key] = el.styles[key];
25512
+ }
25502
25513
  }
25514
+ el.styles = styles;
25503
25515
  }
25504
- el.styles = styles;
25505
25516
  }
25506
25517
  });
25507
25518
  if (typeof props.customHtmlPaste == "function") {
25508
25519
  await props.customHtmlPaste(elements);
25509
25520
  } else {
25510
25521
  for (let i = 0; i < elements.length; i++) {
25511
- editor.value.insertElement(elements[i], false);
25522
+ if (i == 0) {
25523
+ editor.value.insertElement(elements[i]);
25524
+ } else {
25525
+ editor.value.insertElement(elements[i], false);
25526
+ }
25512
25527
  }
25513
25528
  }
25514
25529
  };
@@ -25870,7 +25885,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
25870
25885
  };
25871
25886
  }
25872
25887
  });
25873
- const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4a3bc815"]]);
25888
+ const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4c71ae18"]]);
25874
25889
  const InsertAttachmentProps = {
25875
25890
  //主题色
25876
25891
  color: {
@@ -26006,16 +26021,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
26006
26021
  filterFiles.push(file2);
26007
26022
  }
26008
26023
  if (filterFiles.length) {
26009
- let attachments = [];
26024
+ let urls = [];
26010
26025
  if (typeof props.customUpload == "function") {
26011
- attachments = await props.customUpload(filterFiles) || [];
26026
+ urls = await props.customUpload(filterFiles) || [];
26012
26027
  } else {
26013
26028
  for (let i = 0; i < filterFiles.length; i++) {
26014
26029
  const url = await file.dataFileToBase64(filterFiles[i]);
26015
- attachments.push(url);
26030
+ urls.push(url);
26016
26031
  }
26017
26032
  }
26018
- emits("insert", attachmentName.value, attachments);
26033
+ emits("insert", attachmentName.value, urls);
26019
26034
  }
26020
26035
  fileInputRef.value.value = "";
26021
26036
  };
@@ -26112,7 +26127,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
26112
26127
  };
26113
26128
  }
26114
26129
  });
26115
- const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-71f31c71"]]);
26130
+ const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52b1e545"]]);
26116
26131
  const isAttachment = (element2) => {
26117
26132
  if (element2.isEmpty()) {
26118
26133
  return false;
@@ -26171,12 +26186,12 @@ const attachment = (options) => {
26171
26186
  btnInstance.$refs.layerRef.setPosition();
26172
26187
  },
26173
26188
  onInsert: (name, urls) => {
26174
- const filterUrls = urls.filter((url) => {
26189
+ urls = urls.filter((url) => {
26175
26190
  return !!url;
26176
26191
  });
26177
- if (filterUrls.length) {
26192
+ if (urls.length) {
26178
26193
  const editor = editifyInstance.exposed.editor.value;
26179
- filterUrls.forEach((url) => {
26194
+ urls.forEach((url) => {
26180
26195
  const marks = {
26181
26196
  "data-attachment": url,
26182
26197
  "data-attachment-name": name || editTrans("attachmentDefaultName"),
@@ -26257,7 +26272,7 @@ const attachment = (options) => {
26257
26272
  const install = (app) => {
26258
26273
  app.component(Editify.name, Editify);
26259
26274
  };
26260
- const version = "0.1.33";
26275
+ const version = "0.1.35";
26261
26276
  console.log(`%c vue-editify %c v${version} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
26262
26277
  export {
26263
26278
  AlexElement,