@bendyline/squisq-editor-react 1.6.1 → 1.6.2

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 (44) hide show
  1. package/dist/index.d.ts +87 -41
  2. package/dist/index.js +8263 -6705
  3. package/dist/index.js.map +1 -1
  4. package/dist/styles/index.css +841 -91
  5. package/package.json +4 -4
  6. package/src/BlockPropertiesPopover.tsx +23 -7
  7. package/src/EditorShell.tsx +65 -20
  8. package/src/MediaBin.tsx +171 -28
  9. package/src/PreviewControls.tsx +177 -44
  10. package/src/PreviewPanel.tsx +2 -0
  11. package/src/TemplateAnnotation.ts +22 -7
  12. package/src/TemplateContentPreview.tsx +56 -0
  13. package/src/TemplatePicker.tsx +295 -128
  14. package/src/ThemeCustomizerPanel.tsx +22 -15
  15. package/src/Toolbar.tsx +527 -207
  16. package/src/TransitionPicker.tsx +8 -1
  17. package/src/ViewSwitcher.tsx +4 -4
  18. package/src/WysiwygEditor.tsx +45 -3
  19. package/src/__tests__/buildPreviewDocTransition.test.ts +1 -2
  20. package/src/__tests__/editorShellProps.test.tsx +268 -1
  21. package/src/__tests__/headingTransition.test.ts +59 -9
  22. package/src/__tests__/imageEditorShell.test.tsx +23 -0
  23. package/src/__tests__/mediaReferences.test.ts +82 -0
  24. package/src/__tests__/previewControls.test.tsx +94 -1
  25. package/src/__tests__/templateAnnotationRoundTrip.test.ts +23 -2
  26. package/src/__tests__/templateContentPreview.test.ts +101 -0
  27. package/src/__tests__/tiptapBridge.test.ts +47 -0
  28. package/src/diagram/DiagramWidget.tsx +6 -4
  29. package/src/headingTransition.ts +96 -21
  30. package/src/index.ts +2 -1
  31. package/src/mediaReferences.ts +299 -0
  32. package/src/scene/Scene.tsx +53 -7
  33. package/src/scene/SceneBlockWidget.tsx +6 -3
  34. package/src/scene/SceneSelection.tsx +19 -15
  35. package/src/scene/SceneSideToolbar.tsx +89 -0
  36. package/src/scene/layers/DiagramEdges.tsx +4 -3
  37. package/src/scene/layers/edgeGeometry.ts +23 -4
  38. package/src/scene/scene.css +142 -2
  39. package/src/scene/tools/ConnectTool.ts +113 -24
  40. package/src/scene/tools/DrawingConnectTool.ts +86 -16
  41. package/src/scene/tools/SceneTool.ts +2 -0
  42. package/src/styles/editor.css +862 -101
  43. package/src/templateContentPreviewResolver.ts +353 -0
  44. package/src/tiptapBridge.ts +60 -33
package/src/ThemeCustomizerPanel.tsx CHANGED
@@ -52,6 +52,8 @@ export interface ThemeCustomizerPanelProps {
52
52
  onSave?: (theme: Theme, json: string) => void;
53
53
  /** Fired when the user clicks Reset. Host typically clears its persistent storage. */
54
54
  onReset?: () => void;
55
+ /** Optional text trigger. Omit to use the compact icon trigger. */
56
+ triggerLabel?: string;
55
57
  }
56
58
 
57
59
  export function ThemeCustomizerPanel({
@@ -59,6 +61,7 @@ export function ThemeCustomizerPanel({
59
61
  onChange,
60
62
  onSave,
61
63
  onReset,
64
+ triggerLabel,
62
65
  }: ThemeCustomizerPanelProps) {
63
66
  const [open, setOpen] = useState(false);
64
67
  const [draft, setDraft] = useState<Draft>(() => themeToDraft(value));
@@ -143,26 +146,30 @@ export function ThemeCustomizerPanel({
143
146
  <button
144
147
  type="button"
145
148
  className={`squisq-toolbar-button squisq-theme-customizer-trigger${
146
- open ? ' squisq-toolbar-button--active' : ''
147
- }`}
149
+ triggerLabel ? ' squisq-theme-customizer-trigger--label' : ''
150
+ }${open ? ' squisq-toolbar-button--active' : ''}`}
148
151
  data-tooltip="Customize theme"
149
152
  aria-label="Customize theme"
150
153
  aria-expanded={open}
151
154
  onClick={() => setOpen((v) => !v)}
152
155
  >
153
- <svg
154
- width="16"
155
- height="16"
156
- viewBox="0 0 16 16"
157
- fill="none"
158
- stroke="currentColor"
159
- strokeWidth="1.5"
160
- strokeLinecap="round"
161
- strokeLinejoin="round"
162
- >
163
- <circle cx="8" cy="8" r="6" />
164
- <path d="M8 2 A6 6 0 0 1 8 14 Z" fill="currentColor" stroke="none" />
165
- </svg>
156
+ {triggerLabel ? (
157
+ <span className="squisq-theme-customizer-trigger-label">{triggerLabel}</span>
158
+ ) : (
159
+ <svg
160
+ width="16"
161
+ height="16"
162
+ viewBox="0 0 16 16"
163
+ fill="none"
164
+ stroke="currentColor"
165
+ strokeWidth="1.5"
166
+ strokeLinecap="round"
167
+ strokeLinejoin="round"
168
+ >
169
+ <circle cx="8" cy="8" r="6" />
170
+ <path d="M8 2 A6 6 0 0 1 8 14 Z" fill="currentColor" stroke="none" />
171
+ </svg>
172
+ )}
166
173
  </button>
167
174
  {open && (
168
175
  <div className="squisq-theme-customizer-popover" role="dialog" aria-label="Customize theme">