@nordcraft/runtime 1.0.57 → 1.0.59

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 (39) hide show
  1. package/dist/components/createComponent.js +12 -13
  2. package/dist/components/createComponent.js.map +1 -1
  3. package/dist/components/createElement.js +9 -7
  4. package/dist/components/createElement.js.map +1 -1
  5. package/dist/components/createNode.js.map +1 -1
  6. package/dist/custom-element.main.esm.js +27 -27
  7. package/dist/custom-element.main.esm.js.map +4 -4
  8. package/dist/editor/input.d.ts +1 -0
  9. package/dist/editor/input.js +16 -0
  10. package/dist/editor/input.js.map +1 -0
  11. package/dist/editor/links.d.ts +6 -0
  12. package/dist/editor/links.js +15 -0
  13. package/dist/editor/links.js.map +1 -0
  14. package/dist/editor/overlay.d.ts +12 -0
  15. package/dist/editor/overlay.js +20 -0
  16. package/dist/editor/overlay.js.map +1 -0
  17. package/dist/editor/types.d.ts +254 -0
  18. package/dist/editor/types.js +42 -0
  19. package/dist/editor/types.js.map +1 -0
  20. package/dist/editor-preview.main.js +147 -198
  21. package/dist/editor-preview.main.js.map +1 -1
  22. package/dist/page.main.esm.js +3 -3
  23. package/dist/page.main.esm.js.map +4 -4
  24. package/dist/page.main.js +20 -0
  25. package/dist/page.main.js.map +1 -1
  26. package/dist/styles/CustomPropertyStyleSheet.test.js +12 -3
  27. package/dist/styles/CustomPropertyStyleSheet.test.js.map +1 -1
  28. package/package.json +4 -4
  29. package/src/components/createComponent.ts +27 -20
  30. package/src/components/createElement.ts +29 -21
  31. package/src/components/createNode.ts +0 -1
  32. package/src/editor/input.ts +17 -0
  33. package/src/editor/links.ts +16 -0
  34. package/src/editor/overlay.ts +21 -0
  35. package/src/editor/types.ts +271 -0
  36. package/src/editor-preview.main.ts +180 -411
  37. package/src/page.main.ts +23 -0
  38. package/src/styles/CustomPropertyStyleSheet.test.ts +12 -3
  39. package/src/editor/types.d.ts +0 -36
@@ -0,0 +1 @@
1
+ export declare const isInputTarget: (event: Event) => boolean;
@@ -0,0 +1,16 @@
1
+ export const isInputTarget = (event) => {
2
+ const target = event.target;
3
+ if (target instanceof HTMLElement) {
4
+ if (target.tagName === 'INPUT' ||
5
+ target.tagName === 'TEXTAREA' ||
6
+ target.tagName === 'SELECT' ||
7
+ target.tagName === 'STYLE-EDITOR') {
8
+ return true;
9
+ }
10
+ if (target.contentEditable?.toLocaleLowerCase() === 'true') {
11
+ return true;
12
+ }
13
+ }
14
+ return false;
15
+ };
16
+ //# sourceMappingURL=input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/editor/input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;IAC3B,IAAI,MAAM,YAAY,WAAW,EAAE,CAAC;QAClC,IACE,MAAM,CAAC,OAAO,KAAK,OAAO;YAC1B,MAAM,CAAC,OAAO,KAAK,UAAU;YAC7B,MAAM,CAAC,OAAO,KAAK,QAAQ;YAC3B,MAAM,CAAC,OAAO,KAAK,cAAc,EACjC,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,IAAI,MAAM,CAAC,eAAe,EAAE,iBAAiB,EAAE,KAAK,MAAM,EAAE,CAAC;YAC3D,OAAO,IAAI,CAAA;QACb,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
@@ -0,0 +1,6 @@
1
+ import type { Component } from '@nordcraft/core/dist/component/component.types';
2
+ /**
3
+ * Modifies all link nodes on a component
4
+ * NOTE: alters in place
5
+ */
6
+ export declare const updateComponentLinks: (component: Component) => Component;
@@ -0,0 +1,15 @@
1
+ import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils';
2
+ /**
3
+ * Modifies all link nodes on a component
4
+ * NOTE: alters in place
5
+ */
6
+ export const updateComponentLinks = (component) => {
7
+ // Find all links and add target="_blank" to them
8
+ Object.entries(component.nodes ?? {}).forEach(([_, node]) => {
9
+ if (node.type === 'element' && node.tag === 'a') {
10
+ node.attrs['target'] = valueFormula('_blank');
11
+ }
12
+ });
13
+ return component;
14
+ };
15
+ //# sourceMappingURL=links.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"links.js","sourceRoot":"","sources":["../../src/editor/links.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAA;AAExE;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,SAAoB,EAAE,EAAE;IAC3D,iDAAiD;IACjD,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE;QAC1D,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAChD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC,CAAC,CAAA;IACF,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA"}
@@ -0,0 +1,12 @@
1
+ export declare function getRectData(selectedNode: Element | null | undefined): {
2
+ left: number;
3
+ right: number;
4
+ top: number;
5
+ bottom: number;
6
+ width: number;
7
+ height: number;
8
+ x: number;
9
+ y: number;
10
+ borderRadius: string[];
11
+ rotate: string;
12
+ } | null;
@@ -0,0 +1,20 @@
1
+ export function getRectData(selectedNode) {
2
+ if (!selectedNode) {
3
+ return null;
4
+ }
5
+ const { borderRadius, rotate } = window.getComputedStyle(selectedNode);
6
+ const rect = selectedNode.getBoundingClientRect();
7
+ return {
8
+ left: rect.left,
9
+ right: rect.right,
10
+ top: rect.top,
11
+ bottom: rect.bottom,
12
+ width: rect.width,
13
+ height: rect.height,
14
+ x: rect.x,
15
+ y: rect.y,
16
+ borderRadius: borderRadius.split(' '),
17
+ rotate,
18
+ };
19
+ }
20
+ //# sourceMappingURL=overlay.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../src/editor/overlay.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,YAAwC;IAClE,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAA;IACtE,MAAM,IAAI,GAAY,YAAY,CAAC,qBAAqB,EAAE,CAAA;IAE1D,OAAO;QACL,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC;QACrC,MAAM;KACP,CAAA;AACH,CAAC"}
@@ -0,0 +1,254 @@
1
+ import type { AnimationKeyframe, Component, ComponentData } from '@nordcraft/core/dist/component/component.types';
2
+ import type { PluginFormula } from '@nordcraft/core/dist/formula/formulaTypes';
3
+ import type { OldTheme, Theme } from '@nordcraft/core/dist/styling/theme';
4
+ import type { FormulaHandlerV2, PluginAction, PluginActionV2 } from '@nordcraft/core/dist/types';
5
+ import type { getRectData } from './overlay';
6
+ export type NordcraftPreviewEvent = {
7
+ type: 'style_variant_changed';
8
+ variantIndex: number | null;
9
+ } | {
10
+ type: 'component';
11
+ component: Component;
12
+ } | {
13
+ type: 'components';
14
+ components: Component[];
15
+ } | {
16
+ type: 'packages';
17
+ packages: Record<string, {
18
+ components: Record<string, Component>;
19
+ formulas: Record<string, PluginFormula<FormulaHandlerV2> | PluginFormula<string>>;
20
+ actions: Record<string, PluginActionV2 | PluginAction>;
21
+ manifest: {
22
+ name: string;
23
+ commit: string;
24
+ };
25
+ }>;
26
+ } | {
27
+ type: 'global_formulas';
28
+ formulas: Record<string, PluginFormula<FormulaHandlerV2> | PluginFormula<string>>;
29
+ } | {
30
+ type: 'global_actions';
31
+ actions: Record<string, PluginActionV2 | PluginAction>;
32
+ } | {
33
+ type: 'theme';
34
+ theme: Record<string, OldTheme | Theme>;
35
+ } | {
36
+ type: 'mode';
37
+ mode: 'design' | 'test';
38
+ } | {
39
+ type: 'attrs';
40
+ attrs: Record<string, unknown>;
41
+ } | {
42
+ type: 'selection';
43
+ selectedNodeId: string | null;
44
+ } | {
45
+ type: 'highlight';
46
+ highlightedNodeId: string | null;
47
+ } | {
48
+ type: 'click' | 'mousemove' | 'dblclick';
49
+ metaKey: boolean;
50
+ x: number;
51
+ y: number;
52
+ } | {
53
+ type: 'report_document_scroll_size';
54
+ } | {
55
+ type: 'update_inner_text';
56
+ innerText: string;
57
+ } | {
58
+ type: 'reload';
59
+ } | {
60
+ type: 'fetch_api';
61
+ apiKey: string;
62
+ } | {
63
+ type: 'introspect_qraphql_api';
64
+ apiKey: string;
65
+ } | {
66
+ type: 'drag-started';
67
+ x: number;
68
+ y: number;
69
+ } | {
70
+ type: 'drag-ended';
71
+ canceled?: true;
72
+ } | {
73
+ type: 'keydown';
74
+ key: string;
75
+ altKey: boolean;
76
+ metaKey: boolean;
77
+ } | {
78
+ type: 'keyup';
79
+ key: string;
80
+ altKey: boolean;
81
+ metaKey: boolean;
82
+ } | {
83
+ type: 'get_computed_style';
84
+ styles?: string[];
85
+ } | {
86
+ type: 'set_timeline_keyframes';
87
+ keyframes: Record<string, AnimationKeyframe> | null;
88
+ } | {
89
+ type: 'set_timeline_time';
90
+ time: number | null;
91
+ timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end' | string | undefined;
92
+ fillMode: 'none' | 'forwards' | 'backwards' | 'both' | undefined;
93
+ } | {
94
+ type: 'preview_style';
95
+ styles: Record<string, string> | null;
96
+ theme?: {
97
+ key: string;
98
+ value: Theme;
99
+ };
100
+ } | {
101
+ type: 'preview_theme';
102
+ theme: string | null;
103
+ };
104
+ export type EditorPostMessageType = {
105
+ type: 'textComputedStyle';
106
+ computedStyle: Record<string, string>;
107
+ } | {
108
+ type: 'selection';
109
+ selectedNodeId: string | null;
110
+ } | {
111
+ type: 'highlight';
112
+ highlightedNodeId: string | null;
113
+ } | {
114
+ type: 'navigate';
115
+ name: string;
116
+ } | {
117
+ type: 'documentScrollSize';
118
+ scrollHeight: number;
119
+ scrollWidth: number;
120
+ } | {
121
+ type: 'nodeMoved';
122
+ copy: boolean;
123
+ parent?: string | null;
124
+ index?: number;
125
+ } | {
126
+ type: 'computedStyle';
127
+ computedStyle: Record<string, string>;
128
+ } | {
129
+ type: 'style';
130
+ time: string;
131
+ } | {
132
+ type: 'component event';
133
+ event: any;
134
+ time: string;
135
+ data: any;
136
+ } | {
137
+ type: 'keydown';
138
+ event: {
139
+ key: string;
140
+ metaKey: boolean;
141
+ shiftKey: boolean;
142
+ altKey: boolean;
143
+ };
144
+ } | {
145
+ type: 'keyup';
146
+ event: {
147
+ key: string;
148
+ metaKey: boolean;
149
+ shiftKey: boolean;
150
+ altKey: boolean;
151
+ };
152
+ } | {
153
+ type: 'keypress';
154
+ event: {
155
+ key: string;
156
+ metaKey: boolean;
157
+ shiftKey: boolean;
158
+ altKey: boolean;
159
+ };
160
+ } | {
161
+ type: 'data';
162
+ data: ComponentData;
163
+ } | {
164
+ type: 'selectionRect';
165
+ rect: ReturnType<typeof getRectData>;
166
+ } | {
167
+ type: 'highlightRect';
168
+ rect: ReturnType<typeof getRectData>;
169
+ } | {
170
+ type: 'introspectionResult';
171
+ data: any;
172
+ apiKey: string;
173
+ };
174
+ export type DragState = {
175
+ /**
176
+ * Dragging elements within the initial container is a reorder operation while dragging elements outside the initial container is an insert operation.
177
+ * While they share some common properties, we need to differentiate between the two to handle them differently.
178
+ */
179
+ mode: 'reorder' | 'insert';
180
+ elementType: 'element' | 'component' | 'text';
181
+ copy?: HTMLElement;
182
+ element: HTMLElement;
183
+ repeatedNodes: HTMLElement[];
184
+ offset: Point;
185
+ lastCursorPosition: Point;
186
+ initialContainer: HTMLElement;
187
+ initialNextSibling: Element | null;
188
+ initialRect: DOMRect;
189
+ reorderPermutations: Array<{
190
+ nextSibling: Node | null;
191
+ rect: DOMRect;
192
+ }>;
193
+ isTransitioning: boolean;
194
+ selectedInsertAreaIndex?: number;
195
+ insertAreas?: Array<InsertArea>;
196
+ destroying: boolean;
197
+ };
198
+ export type InsertArea = {
199
+ layout: 'block' | 'inline';
200
+ parent: Element;
201
+ index: number;
202
+ center: Point;
203
+ size: number;
204
+ direction: 1 | -1;
205
+ };
206
+ export type Point = {
207
+ x: number;
208
+ y: number;
209
+ };
210
+ export type Line = {
211
+ x1: number;
212
+ y1: number;
213
+ x2: number;
214
+ y2: number;
215
+ };
216
+ /**
217
+ * Styles required for rendering the same exact text again somewhere else (on a overlay rect in the editor)
218
+ */
219
+ export declare enum TextNodeComputedStyles {
220
+ CARET_COLOR = "caret-color",
221
+ DISPLAY = "display",
222
+ FONT_FAMILY = "font-family",
223
+ FONT_SIZE = "font-size",
224
+ FONT_WEIGHT = "font-weight",
225
+ FONT_STYLE = "font-style",
226
+ FONT_VARIANT = "font-variant",
227
+ FONT_STRETCH = "font-stretch",
228
+ LINE_HEIGHT = "line-height",
229
+ TEXT_ALIGN = "text-align",
230
+ TEXT_TRANSFORM = "text-transform",
231
+ LETTER_SPACING = "letter-spacing",
232
+ WHITE_SPACE = "white-space",
233
+ WORD_SPACING = "word-spacing",
234
+ TEXT_INDENT = "text-indent",
235
+ TEXT_OVERFLOW = "text-overflow",
236
+ TEXT_RENDERING = "text-rendering",
237
+ WORD_BREAK = "word-break",
238
+ WORD_WRAP = "word-wrap",
239
+ DIRECTION = "direction",
240
+ UNICODE_BIDI = "unicode-bidi",
241
+ VERTICAL_ALIGN = "vertical-align",
242
+ FONT_KERNING = "font-kerning",
243
+ FONT_FEATURE_SETTINGS = "font-feature-settings",
244
+ FONT_VARIATION_SETTINGS = "font-variation-settings",
245
+ FONT_SMOOTHING = "-webkit-font-smoothing",
246
+ ANTI_ALIASING = "-moz-osx-font-smoothing",
247
+ FONT_OPTICAL_SIZING = "font-optical-sizing",
248
+ TAB_SIZE = "tab-size",
249
+ HYPHENS = "hyphens",
250
+ TEXT_ORIENTATION = "text-orientation",
251
+ WRITING_MODE = "writing-mode",
252
+ LINE_BREAK = "line-break",
253
+ OVERFLOW_WRAP = "overflow-wrap"
254
+ }
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Styles required for rendering the same exact text again somewhere else (on a overlay rect in the editor)
3
+ */
4
+ export var TextNodeComputedStyles;
5
+ (function (TextNodeComputedStyles) {
6
+ // Caret color is important as it is the only visible part of the text node (when text is not highlighted)
7
+ TextNodeComputedStyles["CARET_COLOR"] = "caret-color";
8
+ TextNodeComputedStyles["DISPLAY"] = "display";
9
+ TextNodeComputedStyles["FONT_FAMILY"] = "font-family";
10
+ TextNodeComputedStyles["FONT_SIZE"] = "font-size";
11
+ TextNodeComputedStyles["FONT_WEIGHT"] = "font-weight";
12
+ TextNodeComputedStyles["FONT_STYLE"] = "font-style";
13
+ TextNodeComputedStyles["FONT_VARIANT"] = "font-variant";
14
+ TextNodeComputedStyles["FONT_STRETCH"] = "font-stretch";
15
+ TextNodeComputedStyles["LINE_HEIGHT"] = "line-height";
16
+ TextNodeComputedStyles["TEXT_ALIGN"] = "text-align";
17
+ TextNodeComputedStyles["TEXT_TRANSFORM"] = "text-transform";
18
+ TextNodeComputedStyles["LETTER_SPACING"] = "letter-spacing";
19
+ TextNodeComputedStyles["WHITE_SPACE"] = "white-space";
20
+ TextNodeComputedStyles["WORD_SPACING"] = "word-spacing";
21
+ TextNodeComputedStyles["TEXT_INDENT"] = "text-indent";
22
+ TextNodeComputedStyles["TEXT_OVERFLOW"] = "text-overflow";
23
+ TextNodeComputedStyles["TEXT_RENDERING"] = "text-rendering";
24
+ TextNodeComputedStyles["WORD_BREAK"] = "word-break";
25
+ TextNodeComputedStyles["WORD_WRAP"] = "word-wrap";
26
+ TextNodeComputedStyles["DIRECTION"] = "direction";
27
+ TextNodeComputedStyles["UNICODE_BIDI"] = "unicode-bidi";
28
+ TextNodeComputedStyles["VERTICAL_ALIGN"] = "vertical-align";
29
+ TextNodeComputedStyles["FONT_KERNING"] = "font-kerning";
30
+ TextNodeComputedStyles["FONT_FEATURE_SETTINGS"] = "font-feature-settings";
31
+ TextNodeComputedStyles["FONT_VARIATION_SETTINGS"] = "font-variation-settings";
32
+ TextNodeComputedStyles["FONT_SMOOTHING"] = "-webkit-font-smoothing";
33
+ TextNodeComputedStyles["ANTI_ALIASING"] = "-moz-osx-font-smoothing";
34
+ TextNodeComputedStyles["FONT_OPTICAL_SIZING"] = "font-optical-sizing";
35
+ TextNodeComputedStyles["TAB_SIZE"] = "tab-size";
36
+ TextNodeComputedStyles["HYPHENS"] = "hyphens";
37
+ TextNodeComputedStyles["TEXT_ORIENTATION"] = "text-orientation";
38
+ TextNodeComputedStyles["WRITING_MODE"] = "writing-mode";
39
+ TextNodeComputedStyles["LINE_BREAK"] = "line-break";
40
+ TextNodeComputedStyles["OVERFLOW_WRAP"] = "overflow-wrap";
41
+ })(TextNodeComputedStyles || (TextNodeComputedStyles = {}));
42
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/editor/types.ts"],"names":[],"mappings":"AAuOA;;GAEG;AACH,MAAM,CAAN,IAAY,sBAoCX;AApCD,WAAY,sBAAsB;IAChC,0GAA0G;IAC1G,qDAA2B,CAAA;IAC3B,6CAAmB,CAAA;IACnB,qDAA2B,CAAA;IAC3B,iDAAuB,CAAA;IACvB,qDAA2B,CAAA;IAC3B,mDAAyB,CAAA;IACzB,uDAA6B,CAAA;IAC7B,uDAA6B,CAAA;IAC7B,qDAA2B,CAAA;IAC3B,mDAAyB,CAAA;IACzB,2DAAiC,CAAA;IACjC,2DAAiC,CAAA;IACjC,qDAA2B,CAAA;IAC3B,uDAA6B,CAAA;IAC7B,qDAA2B,CAAA;IAC3B,yDAA+B,CAAA;IAC/B,2DAAiC,CAAA;IACjC,mDAAyB,CAAA;IACzB,iDAAuB,CAAA;IACvB,iDAAuB,CAAA;IACvB,uDAA6B,CAAA;IAC7B,2DAAiC,CAAA;IACjC,uDAA6B,CAAA;IAC7B,yEAA+C,CAAA;IAC/C,6EAAmD,CAAA;IACnD,mEAAyC,CAAA;IACzC,mEAAyC,CAAA;IACzC,qEAA2C,CAAA;IAC3C,+CAAqB,CAAA;IACrB,6CAAmB,CAAA;IACnB,+DAAqC,CAAA;IACrC,uDAA6B,CAAA;IAC7B,mDAAyB,CAAA;IACzB,yDAA+B,CAAA;AACjC,CAAC,EApCW,sBAAsB,KAAtB,sBAAsB,QAoCjC"}