@useinsider/guido 1.0.0-beta.ef5e504 → 1.0.0-beta.f2786f4

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 (231) hide show
  1. package/README.md +30 -294
  2. package/dist/@types/generic.d.ts +0 -12
  3. package/dist/App.vue.d.ts +1 -1
  4. package/dist/components/Guido.vue.d.ts +3 -17
  5. package/dist/components/Guido.vue.js +8 -8
  6. package/dist/components/Guido.vue2.js +20 -57
  7. package/dist/components/organisms/{header/HeaderWrapper.vue.js → top-bar/Header.vue.js} +7 -7
  8. package/dist/components/organisms/top-bar/Header.vue2.js +14 -0
  9. package/dist/components/organisms/top-bar/HeaderLeftSlot.vue.d.ts +2 -0
  10. package/dist/components/organisms/top-bar/HeaderLeftSlot.vue.js +17 -0
  11. package/dist/components/organisms/top-bar/HeaderLeftSlot.vue2.js +11 -0
  12. package/dist/components/organisms/top-bar/HeaderMiddleSlot.vue.d.ts +2 -0
  13. package/dist/components/organisms/top-bar/HeaderMiddleSlot.vue.js +17 -0
  14. package/dist/components/organisms/top-bar/HeaderMiddleSlot.vue2.js +19 -0
  15. package/dist/components/organisms/top-bar/HeaderRightSlot.vue.js +18 -0
  16. package/dist/components/organisms/top-bar/HeaderRightSlot.vue2.js +12 -0
  17. package/dist/components/organisms/top-bar/HeaderViewOptions.vue.d.ts +2 -0
  18. package/dist/components/organisms/top-bar/HeaderViewOptions.vue.js +18 -0
  19. package/dist/components/organisms/{header/ViewOptions.vue2.js → top-bar/HeaderViewOptions.vue2.js} +3 -3
  20. package/dist/composables/useCustomInterfaceAppearance.js +9 -45
  21. package/dist/composables/useStripo.d.ts +2 -2
  22. package/dist/composables/useStripo.js +56 -66
  23. package/dist/composables/useTemplates.d.ts +5 -0
  24. package/dist/composables/useTemplates.js +27 -0
  25. package/dist/composables/useToaster.d.ts +0 -1
  26. package/dist/composables/useTranslations.d.ts +3 -1
  27. package/dist/composables/useTranslations.js +7 -5
  28. package/dist/enums/defaults.d.ts +0 -2
  29. package/dist/enums/defaults.js +3 -5
  30. package/dist/guido.css +1 -1
  31. package/dist/node_modules/pinia/dist/pinia.js +314 -0
  32. package/dist/node_modules/pinia/node_modules/vue-demi/lib/index.js +11 -0
  33. package/dist/static/editor.css.js +182 -0
  34. package/dist/static/templates/default/index.html.js +5 -0
  35. package/dist/static/templates/default/style.css.js +119 -0
  36. package/dist/stores/editor.d.ts +0 -5
  37. package/dist/stores/editor.js +4 -9
  38. package/package.json +5 -6
  39. package/dist/_virtual/AddCustomFont.js +0 -4
  40. package/dist/_virtual/AiAssistantValueType.js +0 -4
  41. package/dist/_virtual/BackgroundColorBuiltInControl.js +0 -4
  42. package/dist/_virtual/BackgroundImageBuiltInControl.js +0 -4
  43. package/dist/_virtual/Block.js +0 -4
  44. package/dist/_virtual/BlockAttributes.js +0 -4
  45. package/dist/_virtual/BlockCompositionType.js +0 -4
  46. package/dist/_virtual/BlockPaddingsBuiltInControl.js +0 -4
  47. package/dist/_virtual/BlockRenderer.js +0 -4
  48. package/dist/_virtual/BlockType.js +0 -4
  49. package/dist/_virtual/BlocksPanel.js +0 -4
  50. package/dist/_virtual/BuiltInControl.js +0 -4
  51. package/dist/_virtual/BuiltInControlTypes.js +0 -4
  52. package/dist/_virtual/ButtonBorderBuiltInControl.js +0 -4
  53. package/dist/_virtual/ButtonColorBuiltInControl.js +0 -4
  54. package/dist/_virtual/ButtonFontColorBuiltInControl.js +0 -4
  55. package/dist/_virtual/ButtonInternalIndentsBuiltInControl.js +0 -4
  56. package/dist/_virtual/ButtonTextBuiltInControl.js +0 -4
  57. package/dist/_virtual/ContextAction.js +0 -4
  58. package/dist/_virtual/ContextActionType.js +0 -4
  59. package/dist/_virtual/Control.js +0 -4
  60. package/dist/_virtual/EditorStatePropertyType.js +0 -4
  61. package/dist/_virtual/Extension.js +0 -4
  62. package/dist/_virtual/ExtensionBuilder.js +0 -4
  63. package/dist/_virtual/FontFamilyBuiltInControl.js +0 -4
  64. package/dist/_virtual/LinkColorBuiltInControl.js +0 -4
  65. package/dist/_virtual/ModificationDescription.js +0 -4
  66. package/dist/_virtual/PanelPosition.js +0 -4
  67. package/dist/_virtual/PreviewDeviceMode.js +0 -4
  68. package/dist/_virtual/SettingsPanelRegistry.js +0 -4
  69. package/dist/_virtual/SettingsPanelTab.js +0 -4
  70. package/dist/_virtual/SettingsTab.js +0 -4
  71. package/dist/_virtual/StructureBorderBuiltInControl.js +0 -4
  72. package/dist/_virtual/StructurePaddingsBuiltInControl.js +0 -4
  73. package/dist/_virtual/TextColorBuiltInControl.js +0 -4
  74. package/dist/_virtual/TextLineSpacingBuiltInControl.js +0 -4
  75. package/dist/_virtual/TextSizeBuiltInControl.js +0 -4
  76. package/dist/_virtual/TextStyleBuiltInControl.js +0 -4
  77. package/dist/_virtual/UIElement.js +0 -4
  78. package/dist/_virtual/UIElementTagRegistry.js +0 -4
  79. package/dist/_virtual/UIElementType.js +0 -4
  80. package/dist/_virtual/UIElementsAttributes.js +0 -4
  81. package/dist/_virtual/index.js +0 -5
  82. package/dist/_virtual/index2.js +0 -4
  83. package/dist/components/organisms/design-preview/DesktopPreview.vue.d.ts +0 -16
  84. package/dist/components/organisms/design-preview/DesktopPreview.vue.js +0 -22
  85. package/dist/components/organisms/design-preview/DesktopPreview.vue2.js +0 -28
  86. package/dist/components/organisms/design-preview/EmailPreview.vue.d.ts +0 -16
  87. package/dist/components/organisms/design-preview/EmailPreview.vue.js +0 -17
  88. package/dist/components/organisms/design-preview/EmailPreview.vue2.js +0 -37
  89. package/dist/components/organisms/design-preview/EmailView.vue.d.ts +0 -18
  90. package/dist/components/organisms/design-preview/EmailView.vue.js +0 -19
  91. package/dist/components/organisms/design-preview/EmailView.vue2.js +0 -24
  92. package/dist/components/organisms/design-preview/InboxView.vue.d.ts +0 -17
  93. package/dist/components/organisms/design-preview/InboxView.vue.js +0 -19
  94. package/dist/components/organisms/design-preview/InboxView.vue2.js +0 -23
  95. package/dist/components/organisms/design-preview/MobilePreview.vue.d.ts +0 -17
  96. package/dist/components/organisms/design-preview/MobilePreview.vue.js +0 -17
  97. package/dist/components/organisms/design-preview/MobilePreview.vue2.js +0 -22
  98. package/dist/components/organisms/header/AmpErrorModal.vue.d.ts +0 -16
  99. package/dist/components/organisms/header/AmpErrorModal.vue.js +0 -21
  100. package/dist/components/organisms/header/AmpErrorModal.vue2.js +0 -27
  101. package/dist/components/organisms/header/AmpToggle.vue.js +0 -19
  102. package/dist/components/organisms/header/AmpToggle.vue2.js +0 -38
  103. package/dist/components/organisms/header/HeaderWrapper.vue2.js +0 -14
  104. package/dist/components/organisms/header/LeftSlot.vue.d.ts +0 -2
  105. package/dist/components/organisms/header/LeftSlot.vue.js +0 -17
  106. package/dist/components/organisms/header/LeftSlot.vue2.js +0 -13
  107. package/dist/components/organisms/header/MiddleSlot.vue.d.ts +0 -2
  108. package/dist/components/organisms/header/MiddleSlot.vue.js +0 -17
  109. package/dist/components/organisms/header/MiddleSlot.vue2.js +0 -26
  110. package/dist/components/organisms/header/RightSlot.vue.d.ts +0 -2
  111. package/dist/components/organisms/header/RightSlot.vue.js +0 -17
  112. package/dist/components/organisms/header/RightSlot.vue2.js +0 -21
  113. package/dist/components/organisms/header/ViewOptions.vue.d.ts +0 -2
  114. package/dist/components/organisms/header/ViewOptions.vue.js +0 -18
  115. package/dist/components/organisms/header/version-history/RestoreButton.vue.d.ts +0 -2
  116. package/dist/components/organisms/header/version-history/RestoreButton.vue.js +0 -19
  117. package/dist/components/organisms/header/version-history/RestoreButton.vue2.js +0 -14
  118. package/dist/components/organisms/header/version-history/VersionHistory.vue.d.ts +0 -14
  119. package/dist/components/organisms/header/version-history/VersionHistory.vue.js +0 -22
  120. package/dist/components/organisms/header/version-history/VersionHistory.vue2.js +0 -18
  121. package/dist/components/organisms/header/version-history/VersionHistoryItem.vue.d.ts +0 -16
  122. package/dist/components/organisms/header/version-history/VersionHistoryItem.vue.js +0 -18
  123. package/dist/components/organisms/header/version-history/VersionHistoryItem.vue2.js +0 -16
  124. package/dist/components/organisms/header/version-history/ViewOptions.vue.d.ts +0 -2
  125. package/dist/components/organisms/header/version-history/ViewOptions.vue.js +0 -18
  126. package/dist/components/organisms/header/version-history/ViewOptions.vue2.js +0 -23
  127. package/dist/composables/useActionsApi.d.ts +0 -5
  128. package/dist/composables/useActionsApi.js +0 -38
  129. package/dist/composables/useDebounce.d.ts +0 -4
  130. package/dist/composables/useDebounce.js +0 -12
  131. package/dist/composables/useExport.d.ts +0 -3
  132. package/dist/composables/useExport.js +0 -45
  133. package/dist/composables/useHtmlCompiler.d.ts +0 -4
  134. package/dist/composables/useHtmlCompiler.js +0 -16
  135. package/dist/composables/useHttp.js +0 -84
  136. package/dist/composables/useMobileGmailFit.d.ts +0 -5
  137. package/dist/composables/useMobileGmailFit.js +0 -69
  138. package/dist/composables/usePartner.d.ts +0 -4
  139. package/dist/composables/usePartner.js +0 -16
  140. package/dist/composables/usePreviewMode.d.ts +0 -6
  141. package/dist/composables/usePreviewMode.js +0 -19
  142. package/dist/composables/useToaster.js +0 -37
  143. package/dist/composables/useVersionHistoryApi.d.ts +0 -8
  144. package/dist/composables/useVersionHistoryApi.js +0 -53
  145. package/dist/config/compiler/htmlCompilerRules.d.ts +0 -2
  146. package/dist/config/compiler/htmlCompilerRules.js +0 -145
  147. package/dist/config/compiler/outlookCompilerRules.d.ts +0 -0
  148. package/dist/enums/displayConditions.d.ts +0 -2
  149. package/dist/enums/displayConditions.js +0 -80
  150. package/dist/enums/gmailMobilePreview.d.ts +0 -7
  151. package/dist/enums/gmailMobilePreview.js +0 -17
  152. package/dist/extensions/DynamicContent/dynamic-content-modal.d.ts +0 -6
  153. package/dist/extensions/DynamicContent/dynamic-content-modal.js +0 -27
  154. package/dist/extensions/DynamicContent/dynamic-content.css.js +0 -24
  155. package/dist/extensions/DynamicContent/dynamic-content.d.ts +0 -16
  156. package/dist/extensions/DynamicContent/dynamic-content.js +0 -63
  157. package/dist/extensions/DynamicContent/extension.d.ts +0 -2
  158. package/dist/extensions/DynamicContent/extension.js +0 -11
  159. package/dist/inbox-mockup.svg +0 -41
  160. package/dist/mock/api/custom-fonts.d.ts +0 -2
  161. package/dist/mock/api/default-template.d.ts +0 -2
  162. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/Extension.js +0 -51
  163. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ExtensionBuilder.js +0 -52
  164. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/Block.js +0 -41
  165. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/BlockRenderer.js +0 -18
  166. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/BlocksPanel.js +0 -32
  167. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/blocks/ContextAction.js +0 -18
  168. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/AddCustomFont.js +0 -8
  169. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js +0 -13
  170. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockAttributes.js +0 -34
  171. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js +0 -13
  172. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js +0 -13
  173. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js +0 -104
  174. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js +0 -13
  175. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js +0 -13
  176. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js +0 -13
  177. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js +0 -13
  178. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js +0 -13
  179. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js +0 -13
  180. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementsAttributes.js +0 -45
  181. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BackgroundColorBuiltInControl.js +0 -43
  182. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BackgroundImageBuiltInControl.js +0 -46
  183. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BlockPaddingsBuiltInControl.js +0 -44
  184. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/BuiltInControl.js +0 -22
  185. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonBorderBuiltInControl.js +0 -46
  186. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonColorBuiltInControl.js +0 -46
  187. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonFontColorBuiltInControl.js +0 -45
  188. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonInternalIndentsBuiltInControl.js +0 -45
  189. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/ButtonTextBuiltInControl.js +0 -45
  190. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/Control.js +0 -20
  191. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/FontFamilyBuiltInControl.js +0 -43
  192. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/LinkColorBuiltInControl.js +0 -45
  193. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelRegistry.js +0 -18
  194. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelTab.js +0 -32
  195. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/StructureBorderBuiltInControl.js +0 -46
  196. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/StructurePaddingsBuiltInControl.js +0 -44
  197. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextColorBuiltInControl.js +0 -43
  198. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextLineSpacingBuiltInControl.js +0 -43
  199. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextSizeBuiltInControl.js +0 -45
  200. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/controls/TextStyleBuiltInControl.js +0 -43
  201. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/index.js +0 -266
  202. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/modifications/ModificationDescription.js +0 -26
  203. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElement.js +0 -22
  204. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElementTagRegistry.js +0 -18
  205. package/dist/phone-mockup.svg +0 -31
  206. package/dist/services/stripoApi.d.ts +0 -8
  207. package/dist/services/stripoApi.js +0 -45
  208. package/dist/static/styles/base.css.js +0 -11
  209. package/dist/static/styles/components/alert-message.css.js +0 -39
  210. package/dist/static/styles/components/amp-block.css.js +0 -18
  211. package/dist/static/styles/components/base-input.css.js +0 -47
  212. package/dist/static/styles/components/button-group.css.js +0 -54
  213. package/dist/static/styles/components/button.css.js +0 -106
  214. package/dist/static/styles/components/combobox.css.js +0 -49
  215. package/dist/static/styles/components/counter.css.js +0 -42
  216. package/dist/static/styles/components/dropdown-menu.css.js +0 -52
  217. package/dist/static/styles/components/narrow-panel.css.js +0 -38
  218. package/dist/static/styles/components/switcher.css.js +0 -11
  219. package/dist/static/styles/components/tabs.css.js +0 -97
  220. package/dist/static/styles/components/tools.css.js +0 -23
  221. package/dist/static/styles/components/version-history.css.js +0 -30
  222. package/dist/static/styles/components/wide-panel.css.js +0 -135
  223. package/dist/static/styles/variables.css.js +0 -23
  224. package/dist/stores/version-history.d.ts +0 -80
  225. package/dist/stores/version-history.js +0 -28
  226. package/dist/utils/dateUtil.d.ts +0 -1
  227. package/dist/utils/dateUtil.js +0 -16
  228. package/dist/utils/htmlCompiler.d.ts +0 -12
  229. package/dist/utils/htmlCompiler.js +0 -70
  230. /package/dist/components/organisms/{header/AmpToggle.vue.d.ts → top-bar/Header.vue.d.ts} +0 -0
  231. /package/dist/components/organisms/{header/HeaderWrapper.vue.d.ts → top-bar/HeaderRightSlot.vue.d.ts} +0 -0
package/README.md CHANGED
@@ -14,10 +14,7 @@ Guido is a Vue 2 + TypeScript wrapper for the Stripo Email Editor plugin. Easily
14
14
  ```bash
15
15
  npm install @useinsider/guido
16
16
  ```
17
- ### Prerequisites
18
- 🍍 Your project should have `pinia`
19
17
 
20
- ---
21
18
  ## 🚀 Usage
22
19
 
23
20
  ### Basic Usage
@@ -26,11 +23,8 @@ npm install @useinsider/guido
26
23
  <template>
27
24
  <div>
28
25
  <Guido
29
- ref="guidoEditor"
30
26
  :email-id="emailId"
31
- :user-id="userId"
32
27
  :guido-config="guidoConfig"
33
- @dynamic-content:open="handleDynamicContentOpen"
34
28
  />
35
29
  </div>
36
30
  </template>
@@ -45,35 +39,10 @@ export default {
45
39
  data() {
46
40
  return {
47
41
  emailId: 'abc123',
48
- userId: '12345',
49
42
  guidoConfig: {
50
- translationsPath: 'window.trans.en',
51
- htmlCompilerRules: [],
52
- ignoreDefaultHtmlCompilerRules: false,
43
+ translationsPath: 'window.trans.en'
53
44
  }
54
- dynamicContentModalVisible: false
55
45
  };
56
- },
57
-
58
- methods: {
59
- handleDynamicContentOpen() {
60
- this.dynamicContentModalVisible = true;
61
- }
62
- // ⚠️ Your own Dynamic Content Modal should have this id: #guido-dynamic-content-modal
63
- handleDynamicContentInsert() {
64
- this.$ref.guidoEditor?.dynamicContent.insert({
65
- text: 'Text',
66
- value: 'Value',
67
- fallback: 'Fallback'
68
- });
69
-
70
- this.dynamicContentModalVisible = false;
71
- },
72
- // ⚠️ It's mandatory. There is no way to understand if user closes the modal without selection.
73
- handleDynamicContentClose() {
74
- this.$ref.guidoEditor?.dynamicContent.close();
75
- }
76
-
77
46
  }
78
47
  };
79
48
  </script>
@@ -86,48 +55,19 @@ export default {
86
55
  | Prop | Type | Required | Default | Description |
87
56
  |------|------|----------|---------|-------------|
88
57
  | `emailId` | `string` | ✅ | - | Unique identifier for the email draft |
89
- | `userId` | `string` | ✅ | - | Unique identifier for the user draft |
90
- | `username` | `string` | ⚪ | Guido User | User name |
91
- | `partnerName` | `string` | ⚪ | Getting from URL host | Unique identifier for the partner draft |
92
- | `productType` | `string` | ⚪ | Getting from URL path | Unique identifier for the product draft |
93
58
  | `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
94
59
 
95
- ### Guido Exposed Methods
96
- ```typescript
97
- dynamicContent.insert(DynamicContent);
98
- dynamicContent.close();
99
- ```
100
-
101
- ### Guido Interfaces
60
+ ### GuidoConfig Interface
102
61
 
103
62
  ```typescript
104
63
  interface GuidoConfig {
105
64
  translationsPath: string;
106
- htmlCompilerRules: CompilerRule[];
107
- ignoreDefaultHtmlCompilerRules: boolean;
108
65
  }
109
66
  ```
110
67
 
111
68
  | Property | Type | Default | Description |
112
69
  |----------|------|---------|-------------|
113
70
  | `translationsPath` | `string` | `'window.trans.en'` | JavaScript path to the translations object |
114
- | `htmlCompilerRules` | `CompilerRule[]` | `[]` | Additional compiler rules to apply to HTML content. See [HTML Compiler Rules](#-html-compiler-rules) section below |
115
- | `ignoreDefaultHtmlCompilerRules` | `boolean` | `false` | Skip default compiler rules and only use custom rules. Default rules: `src/config/compiler/htmlCompilerRules.ts` |
116
-
117
- ```typescript
118
- interface DynamicContent {
119
- value: string;
120
- text: string;
121
- fallback?: string;
122
- }
123
- ```
124
- ---
125
-
126
- | Property | Type | Default | Description |
127
- |----------|------|---------|-------------|
128
- | `value` | `string` | '' | Value of the dynamic content |
129
- | `text` | `string` | '' | Visible value of the dynamic content |
130
- | `fallback?` | `string` | '' | Fallback value of the dynamic content. Optional |
131
71
 
132
72
  ### TypeScript Types
133
73
 
@@ -142,183 +82,17 @@ import type { GuidoConfig } from '@useinsider/guido';
142
82
  import type { StripoEventType } from '@useinsider/guido';
143
83
  ```
144
84
 
145
- ## 🔨 HTML Compiler Rules
146
-
147
- Guido includes a powerful HTML compiler system that allows you to transform HTML content with custom rules. You can define additional rules and optionally ignore the default rules.
148
-
149
- ### Rule Types
150
-
151
- There are 4 types of compiler rules:
152
-
153
- #### 1. Replace Rule
154
- Replace specific strings in HTML content.
85
+ ### StripoEventType
155
86
 
156
87
  ```typescript
157
- {
158
- id: 'fix-encoding',
159
- description: 'Fix URL encoding issues',
160
- type: 'replace',
161
- search: '{%22', // String to find
162
- replacement: '%7B%22', // String to replace with
163
- replaceAll: true, // Replace all occurrences (default: true)
164
- priority: 10 // Execution priority (lower = earlier)
165
- }
166
- ```
167
-
168
- #### 2. Regex Rule
169
- Use regular expressions for complex pattern matching and replacement.
170
-
171
- ```typescript
172
- {
173
- id: 'remove-comments',
174
- description: 'Remove HTML comments',
175
- type: 'regex',
176
- pattern: '<!--.*?-->', // Regex pattern
177
- replacement: '', // Replacement string
178
- flags: 'g', // Regex flags (default: 'g')
179
- priority: 20
180
- }
181
- ```
182
-
183
- #### 3. Remove Rule
184
- Remove specific strings or patterns from HTML content.
185
-
186
- ```typescript
187
- {
188
- id: 'cleanup-scripts',
189
- description: 'Remove unwanted script tags',
190
- type: 'remove',
191
- targets: [ // Array of strings or RegExp objects
192
- '<script src="unwanted.js"></script>',
193
- /onclick="[^"]*"/g
194
- ],
195
- priority: 30
196
- }
197
- ```
198
-
199
- #### 4. Custom Rule
200
- Define complex transformation logic with a custom processor function.
201
-
202
- ```typescript
203
- {
204
- id: 'add-meta-tags',
205
- description: 'Add custom meta tags to head',
206
- type: 'custom',
207
- processor: (html: string): string => {
208
- // Custom transformation logic
209
- const metaTags = '<meta name="custom" content="value">';
210
- return html.replace('</head>', `${metaTags}</head>`);
211
- },
212
- priority: 40
213
- }
214
- ```
215
-
216
- ### Using HTML Compiler Rules
217
-
218
- #### Basic Usage with Custom Rules
219
-
220
- ```typescript
221
- const guidoConfig = {
222
- translationsPath: 'window.trans.en',
223
- htmlCompilerRules: [
224
- {
225
- id: 'replace-domain',
226
- description: 'Replace old domain with new one',
227
- type: 'replace',
228
- search: 'old-domain.com',
229
- replacement: 'new-domain.com',
230
- replaceAll: true,
231
- priority: 10
232
- },
233
- {
234
- id: 'remove-tracking',
235
- description: 'Remove tracking pixels',
236
- type: 'regex',
237
- pattern: '<img[^>]*tracking[^>]*>',
238
- replacement: '',
239
- flags: 'gi',
240
- priority: 20
241
- }
242
- ]
243
- };
244
- ```
245
-
246
- #### Ignoring Default Rules
247
-
248
- ```typescript
249
- const guidoConfig = {
250
- translationsPath: 'window.trans.en',
251
- ignoreDefaultHtmlCompilerRules: true, // Skip all default rules
252
- htmlCompilerRules: [
253
- // Only your custom rules will be applied
254
- {
255
- id: 'custom-transformation',
256
- type: 'replace',
257
- search: 'old-text',
258
- replacement: 'new-text',
259
- priority: 1
260
- }
261
- ]
262
- };
263
- ```
264
-
265
- ### Rule Execution Order
266
-
267
- Rules are executed in priority order (lower numbers first). Rules with the same priority are executed in array order.
268
-
269
- - **Priority 1-99**: Reserved for critical transformations
270
- - **Priority 100-999**: Standard transformations
271
- - **Priority 1000+**: Additional custom rules (automatically assigned)
272
-
273
- ### Default Rules
274
-
275
- Guido includes several default rules for common email HTML optimizations:
276
-
277
- - **URL encoding fixes**: Fixes malformed URL encoding in dynamic content
278
- - **Template tag restoration**: Restores `{{}}` template tags that got URL encoded
279
- - **HTML entity decoding**: Converts `&lt;` and `&gt;` back to `<` and `>`
280
- - **Cleanup rules**: Removes unwanted iframe and style elements
281
- - **MSO conditions**: Manages Outlook-specific conditional comments
282
- - **Domain replacement**: Updates old image domains to current ones
283
-
284
- You can view all default rules in: `src/config/compiler/htmlCompilerRules.ts`
285
-
286
- ### CompilerRule Interface
287
-
288
- ```typescript
289
- type CompilerRuleType = 'replace' | 'regex' | 'remove' | 'custom';
290
-
291
- interface BaseCompilerRule {
292
- id: string;
293
- description?: string;
294
- priority: number;
295
- }
296
-
297
- interface ReplaceRule extends BaseCompilerRule {
298
- type: 'replace';
299
- search: string;
300
- replacement: string;
301
- replaceAll?: boolean; // Default: true
302
- }
303
-
304
- interface RegexRule extends BaseCompilerRule {
305
- type: 'regex';
306
- pattern: string;
307
- replacement: string;
308
- flags?: string; // Default: 'g'
309
- }
310
-
311
- interface RemoveRule extends BaseCompilerRule {
312
- type: 'remove';
313
- targets: (string | RegExp)[]; // Array of strings or RegExp objects
314
- }
315
-
316
- interface CustomRule extends BaseCompilerRule {
317
- type: 'custom';
318
- processor: (html: string) => string;
319
- }
320
-
321
- type CompilerRule = ReplaceRule | RegexRule | RemoveRule | CustomRule;
88
+ type StripoEventType =
89
+ | 'save'
90
+ | 'export'
91
+ | 'close'
92
+ | 'autosave'
93
+ | 'publish'
94
+ | 'export:requested'
95
+ | 'export:ready';
322
96
  ```
323
97
 
324
98
  ---
@@ -364,59 +138,25 @@ VITE_STRIPO_ROLE=your_role
364
138
 
365
139
  ```
366
140
  src/
367
- ├── components/ # Vue components
368
- ├── composables/ # Vue composables & business logic
369
- ├── services/ # API layer
370
- ├── stores/ # State management
371
- ├── @types/ # TypeScript definitions
372
- ├── static/ # Static assets & templates
373
- ├── utils/ # Utility functions
374
- ├── enums/ # Constants & enums
375
- ├── mock/ # Mock data for development
376
- ├── plugins/ # Vue plugins
377
- └── library.ts # Main export
141
+ ├── components/
142
+ ├── Guido.vue # Main component
143
+ │ └── organisms/
144
+ │ └── top-bar/ # Header components
145
+ ...
146
+ ├── composables/
147
+ ├── useStripo.ts # Stripo integration
148
+ │ └── useTranslations.ts # Translation management
149
+ ├── @types/
150
+ ├── generic.ts # Generic types
151
+ │ ├── stripo.d.ts # Stripo-specific types
152
+ │ └── events.ts # Event types
153
+ ├── static/
154
+ │ ├── editor.css # Custom editor styles
155
+ │ └── templates/
156
+ │ └── default/ # Default email template
157
+ └── library.ts # Main export for library
378
158
  ```
379
159
 
380
- ## 🌐 i18n
381
- Before running the project, it sends to request to inone.useinsider.com/translations and writes the JSON file into - [trans.json](src/mock/responses/trans.json).
382
- It allows to use production or local translations on your code. 🚀
383
- Example usage:
384
- ```js
385
- import { useTranslations } from '@@/Composables/useTranslations';
386
-
387
- const trans = useTranslations();
388
-
389
- // use everywhere like this:
390
- trans('foo.bar')
391
- ```
392
-
393
- ## 📦 Local Building (Recommended)
394
-
395
- Run this commands if you want to test the package on your local before sending to NPM.
396
- ```sh
397
- bun run build
398
- ```
399
-
400
- Since bun does not have packaging yet, use npm here: 🥲
401
- ```sh
402
- npm pack
403
- ```
404
-
405
- It'll crate like `useinsider-guido-1.0.0.tgz` file.
406
-
407
- Move this file to your project path like: `email-fe` via:
408
- ```sh
409
- cp useinsider-guido-1.0.0.tgz ../email-fe
410
- ```
411
-
412
- Install the file to your project:
413
- ```sh
414
- npm i ./useinsider-guido-1.0.0.tgz
415
- ```
416
-
417
- Then you just need to rebuild to your project or restart the Container. 🎉
418
-
419
- For Future, we can create a shell script for it. Feel free to help 🙃
420
160
 
421
161
  ## 📦 Build Output
422
162
 
@@ -440,6 +180,7 @@ The library builds to multiple formats:
440
180
  }
441
181
  ```
442
182
 
183
+
443
184
  ## 🤝 Contributing
444
185
  - PR Titles should be structured like `TASK-ID | 🔥 | Some Clear Task Descriptions`
445
186
  - PR Labels should be filled.
@@ -459,12 +200,7 @@ ISC License
459
200
  - [@useinsider/design-system-vue](https://github.com/useinsider/design-system-vue) - Insider's Vue design system
460
201
 
461
202
  ## 🎯 TODO:
462
- - CSS part should be optimized with variables & `sass-loader`.
203
+ - [editor.css](src/static/editor.css) should be optimized with variables & `sass-loader`.
463
204
  - Master Version Generator should be fixed.
464
205
  - Playwright integration
465
206
  - Commitlint & Precommit Hooks integration
466
- - We need to emit save event and we should return template config to it
467
- - Default template should be same with production
468
- - Open Guido with saved template
469
- - Get User ID, Email and Unique Template ID as dynamic from props
470
- - Get Pre-built display conditions from API
@@ -1,15 +1,3 @@
1
- import type { CompilerRule } from './html-compiler';
2
1
  export type GuidoConfig = {
3
2
  translationsPath: string;
4
- htmlCompilerRules?: CompilerRule[];
5
- ignoreDefaultHtmlCompilerRules?: boolean;
6
3
  };
7
- export type DynamicContent = {
8
- value: string;
9
- text: string;
10
- fallback?: string;
11
- };
12
- export interface EmailData {
13
- senderName: string;
14
- subject: string;
15
- }
package/dist/App.vue.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import '../node_modules/@useinsider/design-system-vue/dist/design-system-vue.css';
2
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
3
3
  export default _default;
@@ -1,23 +1,9 @@
1
- import type { DynamicContent, GuidoConfig, EmailData } from '@@/Types/generic';
1
+ import type { GuidoConfig } from '@@/Types/generic';
2
2
  type __VLS_Props = {
3
- templateId: string;
4
- userId: string;
5
- partnerName?: string;
6
- productType?: string;
7
- username?: string;
8
- html?: string;
9
- css?: string;
3
+ emailId: string;
10
4
  guidoConfig: GuidoConfig;
11
- emailData?: EmailData;
12
5
  };
13
- declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
14
- dynamicContent: {
15
- insert: (data: DynamicContent) => void;
16
- close: () => void;
17
- };
18
- }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
19
- "dynamic-content:open": (detail: DynamicContent | null) => void;
20
- }, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
6
+ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
21
7
  export default _default;
22
8
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
23
9
  type __VLS_TypePropsToOption<T> = {
@@ -1,18 +1,18 @@
1
1
  import o from "./Guido.vue2.js";
2
2
  /* empty css */
3
- import t from "../_virtual/_plugin-vue2_normalizer.js";
3
+ import i from "../_virtual/_plugin-vue2_normalizer.js";
4
4
  var s = function() {
5
- var i = this, r = i._self._c, e = i._self._setupProxy;
6
- return r("div", { staticClass: "guido-editor__wrapper" }, [r(e.HeaderWrapper), r(e.EmailPreview, { directives: [{ name: "show", rawName: "v-show", value: e.editorStore.isPreviewModeOpen, expression: "editorStore.isPreviewModeOpen" }], attrs: { "email-data": i.emailData, "is-visible": e.editorStore.isPreviewModeOpen } }), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.editorStore.isPreviewModeOpen, expression: "!editorStore.isPreviewModeOpen" }], staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
7
- }, a = [], d = /* @__PURE__ */ t(
5
+ var e = this, r = e._self._c, t = e._self._setupProxy;
6
+ return r("div", { staticClass: "guido-editor__wrapper" }, [r(t.Header), r("div", { staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
7
+ }, _ = [], a = /* @__PURE__ */ i(
8
8
  o,
9
9
  s,
10
- a,
10
+ _,
11
11
  !1,
12
12
  null,
13
- "f09e89b0"
13
+ "ef4897b1"
14
14
  );
15
- const m = d.exports;
15
+ const p = a.exports;
16
16
  export {
17
- m as default
17
+ p as default
18
18
  };
@@ -1,68 +1,31 @@
1
- import { defineComponent as E, onMounted as D } from "vue";
2
- import { usePartner as _ } from "../composables/usePartner.js";
3
- import { useStripo as b } from "../composables/useStripo.js";
4
- import { DefaultUsername as I, DefaultGuidoConfig as P } from "../enums/defaults.js";
5
- import S from "./organisms/design-preview/EmailPreview.vue.js";
6
- import G from "./organisms/header/HeaderWrapper.vue.js";
7
- import { useStripoApi as T } from "../services/stripoApi.js";
8
- import { useEditorStore as N } from "../stores/editor.js";
9
- const M = /* @__PURE__ */ E({
1
+ import { defineComponent as n, onMounted as a } from "vue";
2
+ import { useStripo as m } from "../composables/useStripo.js";
3
+ import { useTemplates as p } from "../composables/useTemplates.js";
4
+ import { DefaultGuidoConfig as u } from "../enums/defaults.js";
5
+ import l from "./organisms/top-bar/Header.vue.js";
6
+ const _ = /* @__PURE__ */ n({
10
7
  __name: "Guido",
11
8
  props: {
12
- templateId: null,
13
- userId: null,
14
- partnerName: null,
15
- productType: null,
16
- username: null,
17
- html: null,
18
- css: null,
19
- guidoConfig: null,
20
- emailData: null
9
+ emailId: null,
10
+ guidoConfig: null
21
11
  },
22
- emits: ["dynamic-content:open"],
23
- setup(h, { expose: v, emit: t }) {
24
- const n = h, { getPartnerName: o, getProductType: i } = _(), {
25
- templateId: r,
26
- userId: a,
27
- guidoConfig: c,
28
- html: l = "",
29
- css: s = "",
30
- partnerName: m = o(),
31
- productType: d = i(),
32
- username: u = I
33
- } = n;
12
+ setup(r) {
13
+ const o = r;
34
14
  window.GuidoConfig = {
35
- ...P,
36
- ...c
15
+ ...u,
16
+ ...o.guidoConfig
37
17
  };
38
- const { initPlugin: p } = b({ emailId: r, userId: a, username: u, partnerName: m, productType: d }), { getDefaultTemplate: f } = T(), w = N(), y = (e) => {
39
- console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
40
- }, g = () => {
41
- console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
42
- };
43
- return D(async () => {
44
- console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
18
+ const { initPlugin: i } = m(o.emailId), { getDefaultTemplate: e } = p();
19
+ return a(async () => {
45
20
  try {
46
- let e = {
47
- html: l,
48
- css: s
49
- };
50
- e.html || (e = await f()), await p(e);
51
- } catch (e) {
52
- console.error("Failed to initialize Stripo editor:", e);
53
- }
54
- document.addEventListener("dynamic-content:open", (e) => {
55
- const C = e;
56
- console.debug("dynamic-content:open", C.detail), t("dynamic-content:open", C.detail);
57
- });
58
- }), v({
59
- dynamicContent: {
60
- insert: y,
61
- close: g
21
+ const t = await e();
22
+ await i(t);
23
+ } catch (t) {
24
+ console.error("Failed to initialize Stripo editor:", t);
62
25
  }
63
- }), { __sfc: !0, props: n, getPartnerName: o, getProductType: i, templateId: r, userId: a, guidoConfig: c, html: l, css: s, partnerName: m, productType: d, username: u, emit: t, initPlugin: p, getDefaultTemplate: f, editorStore: w, insertDynamicContent: y, closeDynamicContent: g, EmailPreview: S, HeaderWrapper: G };
26
+ }), { __sfc: !0, props: o, initPlugin: i, getDefaultTemplate: e, Header: l };
64
27
  }
65
28
  });
66
29
  export {
67
- M as default
30
+ _ as default
68
31
  };
@@ -1,17 +1,17 @@
1
- import t from "./HeaderWrapper.vue2.js";
1
+ import t from "./Header.vue2.js";
2
2
  import s from "../../../_virtual/_plugin-vue2_normalizer.js";
3
- var n = function() {
3
+ var a = function() {
4
4
  var o = this, r = o._self._c, e = o._self._setupProxy;
5
- return r(e.InContainer, { attrs: { border: "bor-w-0 bor-b-w-1 bor-s-s bor-c-6", "border-radius": "bor-r-0" } }, [r("div", { staticClass: "w-1 d-f a-i-c j-c-s-b p-3" }, [r(e.LeftSlot), r(e.MiddleSlot), r(e.RightSlot)], 1)]);
6
- }, a = [], _ = /* @__PURE__ */ s(
5
+ return r(e.InContainer, { attrs: { border: "bor-w-0 bor-b-w-1 bor-s-s bor-c-6", "border-radius": "bor-r-0" } }, [r("div", { staticClass: "w-1 d-f a-i-c j-c-s-b p-3" }, [r(e.HeaderLeftSlot), r(e.HeaderMiddleSlot), r(e.HeaderRightSlot)], 1)]);
6
+ }, n = [], _ = /* @__PURE__ */ s(
7
7
  t,
8
- n,
9
8
  a,
9
+ n,
10
10
  !1,
11
11
  null,
12
12
  null
13
13
  );
14
- const d = _.exports;
14
+ const c = _.exports;
15
15
  export {
16
- d as default
16
+ c as default
17
17
  };
@@ -0,0 +1,14 @@
1
+ import { defineComponent as e } from "vue";
2
+ import { InContainer as r } from "@useinsider/design-system-vue";
3
+ import o from "./HeaderLeftSlot.vue.js";
4
+ import t from "./HeaderMiddleSlot.vue.js";
5
+ import m from "./HeaderRightSlot.vue.js";
6
+ const _ = /* @__PURE__ */ e({
7
+ __name: "Header",
8
+ setup(f) {
9
+ return { __sfc: !0, InContainer: r, HeaderLeftSlot: o, HeaderMiddleSlot: t, HeaderRightSlot: m };
10
+ }
11
+ });
12
+ export {
13
+ _ as default
14
+ };
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
+ export default _default;
@@ -0,0 +1,17 @@
1
+ import n from "./HeaderLeftSlot.vue2.js";
2
+ import o from "../../../_virtual/_plugin-vue2_normalizer.js";
3
+ var _ = function() {
4
+ var t = this, e = t._self._c, r = t._self._setupProxy;
5
+ return e("div", [e(r.InButtonV2, { attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" } })], 1);
6
+ }, a = [], s = /* @__PURE__ */ o(
7
+ n,
8
+ _,
9
+ a,
10
+ !1,
11
+ null,
12
+ null
13
+ );
14
+ const i = s.exports;
15
+ export {
16
+ i as default
17
+ };
@@ -0,0 +1,11 @@
1
+ import { defineComponent as t } from "vue";
2
+ import { InButtonV2 as e } from "@useinsider/design-system-vue";
3
+ const _ = /* @__PURE__ */ t({
4
+ __name: "HeaderLeftSlot",
5
+ setup(o) {
6
+ return { __sfc: !0, InButtonV2: e };
7
+ }
8
+ });
9
+ export {
10
+ _ as default
11
+ };
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
+ export default _default;
@@ -0,0 +1,17 @@
1
+ import n from "./HeaderMiddleSlot.vue2.js";
2
+ import s from "../../../_virtual/_plugin-vue2_normalizer.js";
3
+ var i = function() {
4
+ var o = this, e = o._self._c, t = o._self._setupProxy;
5
+ return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__code-button", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), e(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.trans("newsletter.email-preview") } })], 1);
6
+ }, l = [], r = /* @__PURE__ */ s(
7
+ n,
8
+ i,
9
+ l,
10
+ !1,
11
+ null,
12
+ null
13
+ );
14
+ const _ = r.exports;
15
+ export {
16
+ _ as default
17
+ };