@nuforge/editor 0.1.0 → 0.1.1

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 (4) hide show
  1. package/dist/react.cjs +21 -7
  2. package/dist/react.d.ts +2 -1
  3. package/dist/react.mjs +21 -7
  4. package/package.json +10 -10
package/dist/react.cjs CHANGED
@@ -49,7 +49,7 @@ const DEFAULT_CANVAS_CSS = `
49
49
  img { max-width: 100%; }
50
50
  [data-nu-id] { cursor: default; }
51
51
  `;
52
- function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0, onSelect, onHover, onDropOnNode, baseCss = DEFAULT_CANVAS_CSS, srcDoc, className, containerClassName, renderBox, }) {
52
+ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0, previewMode = false, onSelect, onHover, onDropOnNode, baseCss = DEFAULT_CANVAS_CSS, srcDoc, className, containerClassName, renderBox, }) {
53
53
  const iframeRef = react.useRef(null);
54
54
  const [doc, setDoc] = react.useState(null);
55
55
  const [tick, setTick] = react.useState(0);
@@ -83,6 +83,11 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
83
83
  if (!doc) {
84
84
  return;
85
85
  }
86
+ const onScroll = () => setTick((x) => x + 1);
87
+ doc.addEventListener('scroll', onScroll, true);
88
+ if (previewMode) {
89
+ return () => doc.removeEventListener('scroll', onScroll, true);
90
+ }
86
91
  const onClick = (e) => {
87
92
  e.preventDefault();
88
93
  e.stopPropagation();
@@ -90,20 +95,18 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
90
95
  };
91
96
  const onMove = (e) => onHover?.(templateIdFromElement(e.target));
92
97
  const onLeave = () => onHover?.(null);
93
- const onScroll = () => setTick((x) => x + 1);
94
98
  doc.addEventListener('click', onClick, true);
95
99
  doc.addEventListener('mousemove', onMove);
96
100
  doc.addEventListener('mouseleave', onLeave);
97
- doc.addEventListener('scroll', onScroll, true);
98
101
  return () => {
99
102
  doc.removeEventListener('click', onClick, true);
100
103
  doc.removeEventListener('mousemove', onMove);
101
104
  doc.removeEventListener('mouseleave', onLeave);
102
105
  doc.removeEventListener('scroll', onScroll, true);
103
106
  };
104
- }, [doc, onSelect, onHover]);
107
+ }, [doc, previewMode, onSelect, onHover]);
105
108
  react.useEffect(() => {
106
- if (!doc || !onDropOnNode) {
109
+ if (!doc || !onDropOnNode || previewMode) {
107
110
  return;
108
111
  }
109
112
  const rectFor = (id) => {
@@ -156,6 +159,11 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
156
159
  }
157
160
  return () => observer.disconnect();
158
161
  }, [doc]);
162
+ react.useEffect(() => {
163
+ if (previewMode) {
164
+ setDrop(null);
165
+ }
166
+ }, [previewMode]);
159
167
  const rectOf = (id) => {
160
168
  if (!doc || !id) {
161
169
  return null;
@@ -175,13 +183,19 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
175
183
  return el ? el.tagName.toLowerCase() : null;
176
184
  };
177
185
  react.useLayoutEffect(() => {
186
+ if (previewMode) {
187
+ setSelected(null);
188
+ setHovered(null);
189
+ setSelectedLabel(null);
190
+ return;
191
+ }
178
192
  setSelected(rectOf(selectedId));
179
193
  setHovered(hoveredId && hoveredId !== selectedId ? rectOf(hoveredId) : null);
180
194
  setSelectedLabel(labelOf(selectedId));
181
- }, [selectedId, hoveredId, revision, tick, doc]);
195
+ }, [previewMode, selectedId, hoveredId, revision, tick, doc]);
182
196
  return react.createElement('div', { className: containerClassName, style: { position: 'relative' } }, react.createElement('iframe', { ref: iframeRef, title: 'nuforge preview', className, srcDoc }, doc?.body
183
197
  ? reactDom.createPortal(react.createElement(EditorFrame, { frame }), doc.body)
184
- : null), renderBox
198
+ : null), renderBox && !previewMode
185
199
  ? react.createElement('div', {
186
200
  style: {
187
201
  position: 'absolute',
package/dist/react.d.ts CHANGED
@@ -122,6 +122,7 @@ interface IframeCanvasProps {
122
122
  selectedId?: string | null;
123
123
  hoveredId?: string | null;
124
124
  revision?: number;
125
+ previewMode?: boolean;
125
126
  onSelect?: (id: string | null) => void;
126
127
  onHover?: (id: string | null) => void;
127
128
  onDropOnNode?: (targetId: string, position: DropPosition, event: DragEvent) => void;
@@ -139,7 +140,7 @@ interface IframeCanvasProps {
139
140
  } | null;
140
141
  }) => ReactNode;
141
142
  }
142
- declare function IframeCanvas({ frame, selectedId, hoveredId, revision, onSelect, onHover, onDropOnNode, baseCss, srcDoc, className, containerClassName, renderBox, }: IframeCanvasProps): ReactNode;
143
+ declare function IframeCanvas({ frame, selectedId, hoveredId, revision, previewMode, onSelect, onHover, onDropOnNode, baseCss, srcDoc, className, containerClassName, renderBox, }: IframeCanvasProps): ReactNode;
143
144
  declare function useStructureRevision(editor: Pick<Editor, 'onStructureChange'>): number;
144
145
  declare function useEditorRevision(editor: Pick<Editor, 'onChange'>): number;
145
146
  type PropFieldValue = string | number | boolean | undefined;
package/dist/react.mjs CHANGED
@@ -47,7 +47,7 @@ const DEFAULT_CANVAS_CSS = `
47
47
  img { max-width: 100%; }
48
48
  [data-nu-id] { cursor: default; }
49
49
  `;
50
- function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0, onSelect, onHover, onDropOnNode, baseCss = DEFAULT_CANVAS_CSS, srcDoc, className, containerClassName, renderBox, }) {
50
+ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0, previewMode = false, onSelect, onHover, onDropOnNode, baseCss = DEFAULT_CANVAS_CSS, srcDoc, className, containerClassName, renderBox, }) {
51
51
  const iframeRef = useRef(null);
52
52
  const [doc, setDoc] = useState(null);
53
53
  const [tick, setTick] = useState(0);
@@ -81,6 +81,11 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
81
81
  if (!doc) {
82
82
  return;
83
83
  }
84
+ const onScroll = () => setTick((x) => x + 1);
85
+ doc.addEventListener('scroll', onScroll, true);
86
+ if (previewMode) {
87
+ return () => doc.removeEventListener('scroll', onScroll, true);
88
+ }
84
89
  const onClick = (e) => {
85
90
  e.preventDefault();
86
91
  e.stopPropagation();
@@ -88,20 +93,18 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
88
93
  };
89
94
  const onMove = (e) => onHover?.(templateIdFromElement(e.target));
90
95
  const onLeave = () => onHover?.(null);
91
- const onScroll = () => setTick((x) => x + 1);
92
96
  doc.addEventListener('click', onClick, true);
93
97
  doc.addEventListener('mousemove', onMove);
94
98
  doc.addEventListener('mouseleave', onLeave);
95
- doc.addEventListener('scroll', onScroll, true);
96
99
  return () => {
97
100
  doc.removeEventListener('click', onClick, true);
98
101
  doc.removeEventListener('mousemove', onMove);
99
102
  doc.removeEventListener('mouseleave', onLeave);
100
103
  doc.removeEventListener('scroll', onScroll, true);
101
104
  };
102
- }, [doc, onSelect, onHover]);
105
+ }, [doc, previewMode, onSelect, onHover]);
103
106
  useEffect(() => {
104
- if (!doc || !onDropOnNode) {
107
+ if (!doc || !onDropOnNode || previewMode) {
105
108
  return;
106
109
  }
107
110
  const rectFor = (id) => {
@@ -154,6 +157,11 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
154
157
  }
155
158
  return () => observer.disconnect();
156
159
  }, [doc]);
160
+ useEffect(() => {
161
+ if (previewMode) {
162
+ setDrop(null);
163
+ }
164
+ }, [previewMode]);
157
165
  const rectOf = (id) => {
158
166
  if (!doc || !id) {
159
167
  return null;
@@ -173,13 +181,19 @@ function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0
173
181
  return el ? el.tagName.toLowerCase() : null;
174
182
  };
175
183
  useLayoutEffect(() => {
184
+ if (previewMode) {
185
+ setSelected(null);
186
+ setHovered(null);
187
+ setSelectedLabel(null);
188
+ return;
189
+ }
176
190
  setSelected(rectOf(selectedId));
177
191
  setHovered(hoveredId && hoveredId !== selectedId ? rectOf(hoveredId) : null);
178
192
  setSelectedLabel(labelOf(selectedId));
179
- }, [selectedId, hoveredId, revision, tick, doc]);
193
+ }, [previewMode, selectedId, hoveredId, revision, tick, doc]);
180
194
  return createElement('div', { className: containerClassName, style: { position: 'relative' } }, createElement('iframe', { ref: iframeRef, title: 'nuforge preview', className, srcDoc }, doc?.body
181
195
  ? createPortal(createElement(EditorFrame, { frame }), doc.body)
182
- : null), renderBox
196
+ : null), renderBox && !previewMode
183
197
  ? createElement('div', {
184
198
  style: {
185
199
  position: 'absolute',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuforge/editor",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "High-level SDK for building visual page editors on nuforge (mutations, blocks, commands, selection)",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -24,15 +24,15 @@
24
24
  "dist"
25
25
  ],
26
26
  "dependencies": {
27
- "@nuforge/reactivity": "0.1.0"
27
+ "@nuforge/reactivity": "0.1.1"
28
28
  },
29
29
  "peerDependencies": {
30
30
  "react": "^18 || ^19",
31
31
  "react-dom": "^18 || ^19",
32
- "@nuforge/core": "0.1.0",
33
- "@nuforge/react": "0.1.0",
34
- "@nuforge/types": "0.1.0",
35
- "@nuforge/parser": "0.1.0"
32
+ "@nuforge/core": "0.1.1",
33
+ "@nuforge/parser": "0.1.1",
34
+ "@nuforge/types": "0.1.1",
35
+ "@nuforge/react": "0.1.1"
36
36
  },
37
37
  "peerDependenciesMeta": {
38
38
  "@nuforge/react": {
@@ -50,10 +50,10 @@
50
50
  "@types/react-dom": "^19.2.0",
51
51
  "react": "^19.2.0",
52
52
  "react-dom": "^19.2.0",
53
- "@nuforge/core": "0.1.0",
54
- "@nuforge/types": "0.1.0",
55
- "@nuforge/parser": "0.1.0",
56
- "@nuforge/react": "0.1.0"
53
+ "@nuforge/core": "0.1.1",
54
+ "@nuforge/react": "0.1.1",
55
+ "@nuforge/parser": "0.1.1",
56
+ "@nuforge/types": "0.1.1"
57
57
  },
58
58
  "publishConfig": {
59
59
  "access": "public"