@zipify/wysiwyg 3.1.0-0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/.eslintrc.js +17 -235
  2. package/.github/actions/setup/action.yaml +1 -1
  3. package/README.md +2 -0
  4. package/config/build/cli.config.js +7 -7
  5. package/config/build/lib.config.js +6 -4
  6. package/config/svgo.js +6 -3
  7. package/dist/cli.js +5 -4
  8. package/dist/wysiwyg.css +36 -33
  9. package/dist/wysiwyg.mjs +12403 -11604
  10. package/example/ExampleApp.vue +1 -1
  11. package/example/presets.js +7 -7
  12. package/example/tooltip/Tooltip.js +94 -69
  13. package/example/tooltip/tooltip.css +8 -31
  14. package/lib/Wysiwyg.vue +3 -0
  15. package/lib/__tests__/utils/buildTestExtensions.js +24 -2
  16. package/lib/cli/commands/ToJsonCommand.js +6 -6
  17. package/lib/components/base/__tests__/Button.test.js +1 -1
  18. package/lib/components/base/composables/__tests__/useDeselectionLock.test.js +2 -2
  19. package/lib/components/base/composables/__tests__/useElementRef.test.js +1 -1
  20. package/lib/components/base/composables/__tests__/useModalToggler.test.js +0 -2
  21. package/lib/components/base/composables/__tests__/useValidator.test.js +2 -2
  22. package/lib/components/base/composables/useModalToggler.js +30 -21
  23. package/lib/components/base/dropdown/DropdownActivator.vue +4 -0
  24. package/lib/components/toolbar/Toolbar.vue +1 -1
  25. package/lib/components/toolbar/base/__tests__/ToolbarDivider.test.js +1 -1
  26. package/lib/components/toolbar/controls/StylePresetControl.vue +2 -2
  27. package/lib/components/toolbar/controls/__tests__/LineHeightControl.test.js +0 -2
  28. package/lib/components/toolbar/controls/composables/__tests__/useRecentFonts.test.js +1 -1
  29. package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js +2 -2
  30. package/lib/composables/useToolbar.js +24 -19
  31. package/lib/{entry-cli.js → entryCli.js} +0 -0
  32. package/lib/{entry-lib.js → entryLib.js} +0 -0
  33. package/lib/extensions/Alignment.js +6 -6
  34. package/lib/extensions/FontSize.js +1 -2
  35. package/lib/extensions/Link.js +2 -0
  36. package/lib/extensions/StylePreset.js +8 -46
  37. package/lib/extensions/__tests__/Alignment.test.js +1 -1
  38. package/lib/extensions/__tests__/BackgroundColor.test.js +2 -2
  39. package/lib/extensions/__tests__/FontColor.test.js +3 -3
  40. package/lib/extensions/__tests__/FontFamily.test.js +3 -3
  41. package/lib/extensions/__tests__/FontSize.test.js +3 -3
  42. package/lib/extensions/__tests__/FontWeight.test.js +4 -4
  43. package/lib/extensions/__tests__/LineHeight.test.js +2 -2
  44. package/lib/extensions/__tests__/Link.test.js +33 -5
  45. package/lib/extensions/__tests__/StylePreset.test.js +90 -119
  46. package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap +2 -2
  47. package/lib/extensions/__tests__/__snapshots__/Link.test.js.snap +27 -0
  48. package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap +0 -2
  49. package/lib/extensions/core/NodeProcessor.js +9 -6
  50. package/lib/extensions/core/__tests__/NodeProcessor.test.js +6 -8
  51. package/lib/extensions/core/__tests__/TextProcessor.test.js +1 -1
  52. package/lib/extensions/core/index.js +0 -2
  53. package/lib/extensions/core/plugins/PlaceholderPlugin.js +2 -2
  54. package/lib/extensions/index.js +7 -3
  55. package/lib/extensions/list/List.js +4 -5
  56. package/lib/extensions/list/ListItem.js +1 -2
  57. package/lib/extensions/list/__tests__/List.test.js +7 -2
  58. package/lib/models/Font.js +2 -2
  59. package/lib/models/__tests__/Font.test.js +3 -9
  60. package/lib/services/ContentSerializer.js +9 -9
  61. package/lib/services/{ContextWidnow.js → ContextWindow.js} +0 -0
  62. package/lib/services/HtmlToJsonParser.js +3 -3
  63. package/lib/services/NodeFactory.js +6 -6
  64. package/lib/services/StylePresetRenderer.js +73 -0
  65. package/lib/services/__tests__/JsonSerializer.test.js +1 -1
  66. package/lib/services/__tests__/Storage.test.js +1 -1
  67. package/lib/services/__tests__/StylePresetRenderer.test.js +98 -0
  68. package/lib/services/__tests__/__snapshots__/StylePresetRenderer.test.js.snap +5 -0
  69. package/lib/services/index.js +2 -1
  70. package/lib/services/normalizer/BrowserDomParser.js +2 -2
  71. package/lib/services/normalizer/ContentNormalizer.js +3 -3
  72. package/lib/services/normalizer/HtmlNormalizer.js +52 -52
  73. package/lib/services/normalizer/JsonNormalizer.js +21 -21
  74. package/lib/styles/content.css +10 -10
  75. package/lib/utils/__tests__/convertAlignment.test.js +1 -1
  76. package/lib/utils/__tests__/renderInlineSetting.test.js +2 -2
  77. package/package.json +48 -46
  78. package/lib/extensions/core/steps/AddNodeMarkStep.js +0 -66
  79. package/lib/extensions/core/steps/AttrStep.js +0 -60
  80. package/lib/extensions/core/steps/RemoveNodeMarkStep.js +0 -56
  81. package/lib/extensions/core/steps/index.js +0 -3
package/dist/wysiwyg.css CHANGED
@@ -456,16 +456,19 @@
456
456
  font-size: var(--zw-font-size-xs);
457
457
  }
458
458
 
459
- .zw-dropdown__activator[data-v-eeca926a] {
459
+ .zw-dropdown__activator[data-v-bb5c4efe] {
460
460
  width: 100%;
461
461
  }
462
- .zw-dropdown__activator-arrow[data-v-eeca926a] {
462
+ .zw-dropdown__activator-title[data-v-bb5c4efe] {
463
+ margin-right: var(--zw-offset-xxs);
464
+ }
465
+ .zw-dropdown__activator-arrow[data-v-bb5c4efe] {
463
466
  margin-left: auto;
464
467
  }
465
- .zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-eeca926a] {
468
+ .zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-bb5c4efe] {
466
469
  transform: rotateX(180deg);
467
470
  }
468
- .zw-dropdown__activator--gray[data-v-eeca926a] {
471
+ .zw-dropdown__activator--gray[data-v-bb5c4efe] {
469
472
  background-color: rgb(var(--zw-color-n20));
470
473
  font-size: var(--zw-font-size-xxs);
471
474
  color: rgb(var(--zw-color-white));
@@ -523,23 +526,23 @@
523
526
  line-height: var(--zw-line-height-xxs);
524
527
  }
525
528
 
526
- .zw-style-preset-control[data-v-3739e310] {
529
+ .zw-style-preset-control[data-v-a1013442] {
527
530
  display: flex;
528
531
  align-items: center;
529
532
  }
530
- .zw-style-preset-control__dropdown[data-v-3739e310] {
531
- width: 96px;
533
+ .zw-style-preset-control__dropdown[data-v-a1013442] {
534
+ width: 120px;
532
535
  }
533
- .zw-style-preset-control__reset[data-v-3739e310] {
536
+ .zw-style-preset-control__reset[data-v-a1013442] {
534
537
  color: rgb(var(--zw-color-n70));
535
538
  background-color: rgb(var(--zw-color-n20));
536
539
  }
537
- .zw-style-preset-control__reset[data-v-3739e310]:disabled {
540
+ .zw-style-preset-control__reset[data-v-a1013442]:disabled {
538
541
  background-color: transparent;
539
542
  }
540
- .zw-style-preset-control__reset[data-v-3739e310]:not(:disabled):hover,
541
- .zw-style-preset-control__reset[data-v-3739e310]:not(:disabled):focus,
542
- .zw-style-preset-control__reset[data-v-3739e310]:not(:disabled):focus-within {
543
+ .zw-style-preset-control__reset[data-v-a1013442]:not(:disabled):hover,
544
+ .zw-style-preset-control__reset[data-v-a1013442]:not(:disabled):focus,
545
+ .zw-style-preset-control__reset[data-v-a1013442]:not(:disabled):focus-within {
543
546
  color: rgb(var(--zw-color-white));
544
547
  background-color: rgb(var(--zw-color-n30));
545
548
  }
@@ -636,16 +639,16 @@
636
639
  width: 234px;
637
640
  }
638
641
 
639
- .zw-toolbar[data-v-def9f25e] {
642
+ .zw-toolbar[data-v-3ceb232a] {
640
643
  border-radius: 2px;
641
644
  background-color: rgb(var(--zw-color-n15));
642
645
  color: rgb(var(--zw-color-n70));
643
646
  z-index: 999999;
644
647
  text-align: left;
645
- position: fixed;
648
+ position: absolute;
646
649
  }
647
- .zw-toolbar[data-v-def9f25e]::before,
648
- .zw-toolbar[data-v-def9f25e]::after {
650
+ .zw-toolbar[data-v-3ceb232a]::before,
651
+ .zw-toolbar[data-v-3ceb232a]::after {
649
652
  content: "";
650
653
  display: block;
651
654
  width: 100%;
@@ -653,21 +656,21 @@
653
656
  position: absolute;
654
657
  --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
655
658
  }
656
- .zw-toolbar[data-v-def9f25e]::before {
659
+ .zw-toolbar[data-v-3ceb232a]::before {
657
660
  top: var(--zw-toolbar-safe-zone);
658
661
  }
659
- .zw-toolbar[data-v-def9f25e]::after {
662
+ .zw-toolbar[data-v-3ceb232a]::after {
660
663
  bottom: var(--zw-toolbar-safe-zone);
661
664
  }
662
- .zw-toolbar--enter-active[data-v-def9f25e],
663
- .zw-toolbar--leave-active[data-v-def9f25e] {
665
+ .zw-toolbar--enter-active[data-v-3ceb232a],
666
+ .zw-toolbar--leave-active[data-v-3ceb232a] {
664
667
  transition: opacity 150ms ease-out;
665
668
  }
666
- .zw-toolbar--leave-active[data-v-def9f25e] {
669
+ .zw-toolbar--leave-active[data-v-3ceb232a] {
667
670
  transition: opacity 0s ease-in;
668
671
  }
669
- .zw-toolbar--enter[data-v-def9f25e],
670
- .zw-toolbar--leave-to[data-v-def9f25e] {
672
+ .zw-toolbar--enter[data-v-3ceb232a],
673
+ .zw-toolbar--leave-to[data-v-3ceb232a] {
671
674
  opacity: 0;
672
675
  }
673
676
  .zw-wysiwyg {
@@ -749,7 +752,7 @@ $font-height--md: 1.72;
749
752
  .zw-style.zw-style.zw-style {
750
753
  font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
751
754
  font-family: var(--zw-font-family, var(--zw-preset-font-family));
752
- color: var(--zw-font-color, var(--zw-preset-color));
755
+ color: var(--zw-font-color, var(--zw-preset-font-color));
753
756
  font-style: var(--zw-font-style, var(--zw-preset-font-style));
754
757
  text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
755
758
  background-color: var(--zw-background-color, var(--zw-preset-background-color));
@@ -763,23 +766,23 @@ h4.zw-style.zw-style.zw-style {
763
766
  }
764
767
  @media (min-width: 1200px) {
765
768
  .zw-style.zw-style.zw-style {
766
- font-size: var(--zw-font-size-desktop, var(--zw-preset-desktop-font-size));
767
- text-align: var(--zw-text-align-desktop, var(--zw-preset-desktop-alignment));
768
- line-height: var(--zw-line-height-desktop, var(--zw-preset-desktop-line-height));
769
+ font-size: var(--zw-font-size-desktop, var(--zw-preset-font-size-desktop));
770
+ text-align: var(--zw-alignment-desktop, var(--zw-preset-alignment-desktop));
771
+ line-height: var(--zw-line-height-desktop, var(--zw-preset-line-height-desktop));
769
772
  }
770
773
  }
771
774
  @media (min-width: 769px) and (max-width: 1199.98px) {
772
775
  .zw-style.zw-style.zw-style {
773
- font-size: var(--zw-font-size-tablet, var(--zw-preset-tablet-font-size));
774
- text-align: var(--zw-text-align-tablet, var(--zw-preset-tablet-alignment));
775
- line-height: var(--zw-line-height-tablet, var(--zw-preset-tablet-line-height));
776
+ font-size: var(--zw-font-size-tablet, var(--zw-preset-font-size-tablet));
777
+ text-align: var(--zw-alignment-tablet, var(--zw-preset-alignment-tablet));
778
+ line-height: var(--zw-line-height-tablet, var(--zw-preset-line-height-tablet));
776
779
  }
777
780
  }
778
781
  @media (max-width: 768.98px) {
779
782
  .zw-style.zw-style.zw-style {
780
- font-size: var(--zw-font-size-mobile, var(--zw-preset-mobile-font-size));
781
- text-align: var(--zw-text-align-mobile, var(--zw-preset-mobile-alignment));
782
- line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
783
+ font-size: var(--zw-font-size-mobile, var(--zw-preset-font-size-mobile));
784
+ text-align: var(--zw-alignment-mobile, var(--zw-preset-alignment-mobile));
785
+ line-height: var(--zw-line-height-mobile, var(--zw-preset-line-height-mobile));
783
786
  }
784
787
  }
785
788