@itfin/components 1.3.5 → 1.3.6

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/editor/Editor.vue +5 -2
  3. package/src/components/editor/tools/drawing/drawing.js +3 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "1.3.5",
3
+ "version": "1.3.6",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/editor/Editor.vue CHANGED
@@ -96,9 +96,10 @@ class itfEditor extends Vue {
96
96
 
97
97
  @Watch('value')
98
98
  onValueChanged(val, oldVal) {
99
- if (this.editor && (this.isIgnoreReload || JSON.stringify(val) === JSON.stringify(oldVal))) {
99
+ if (this.editor && (this.isIgnoreReload || JSON.stringify(val && val.blocks) === JSON.stringify(oldVal && oldVal.blocks))) {
100
100
  return;
101
101
  }
102
+ console.info('value', JSON.stringify(val && val.blocks), JSON.stringify(oldVal && oldVal.blocks), JSON.stringify(val && val.blocks) === JSON.stringify(oldVal && oldVal.blocks));
102
103
  setTimeout(() => {
103
104
  this.initEditor();
104
105
  }, 200);
@@ -106,10 +107,12 @@ class itfEditor extends Vue {
106
107
 
107
108
  @Watch('readonly')
108
109
  onReadonlyChange(val, oldVal) {
110
+ console.info('readonly');
109
111
  this.editor.readOnly.toggle(this.readonly);
110
112
  }
111
113
 
112
114
  initEditor() {
115
+ console.info('init');
113
116
  if (!this.$refs.container) {
114
117
  return;
115
118
  }
@@ -207,7 +210,7 @@ class itfEditor extends Vue {
207
210
  }
208
211
  this.isIgnoreReload = true;
209
212
  this.$emit('input', await this.editor.save());
210
- this.$nextTick(() => { this.isIgnoreReload = false; });
213
+ setTimeout(() => { this.isIgnoreReload = false; }, 200);
211
214
  }
212
215
  });
213
216
  }
package/src/components/editor/tools/drawing/drawing.js CHANGED
@@ -6,7 +6,7 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 40 40">\n'
6
6
  '</svg>';
7
7
 
8
8
  const content = '' +
9
- '<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw.production.min.js"></script></head><body class="excalidraw-container"><div id="app"></div><style> body { display: flex; width: 100vw; height: 100vh; padding: 0; margin: 0;}#app { flex-grow: 1;}.excalidraw .App-menu_top > .Stack.Stack_vertical > div:first-child, .excalidraw .disable-zen-mode, .excalidraw .layer-ui__wrapper__footer-right, .excalidraw .layer-ui__wrapper__github-corner, .excalidraw button.ToolIcon_type_button.ToolIcon.ToolIcon_size_m.Shape.ToolIcon_type_button--show, .excalidraw .library-menu-items-container__items .library-menu-items-container__header, .excalidraw .library-menu-control-buttons, .excalidraw .ToolIcon__library { display: none;} </style><script type="text/javascript"> const App = () => { const data = window.saveData || {}; return React.createElement(React.Fragment, null, React.createElement("div", {style: {height: "100%"},}, React.createElement(ExcalidrawLib.Excalidraw, { initialData: { elements: data.elements || [], libraryItems: data.libraryItems || [], appState: {zenModeEnabled: false}, scrollToContent: false }, onChange: (elements, state, files) => { window.saveData = window.saveData || {}; window.saveData.elements = elements; window.saveData.files = files; ExcalidrawLib.exportToSvg({ elements, state, files }).then(svg => { svg.removeAttribute(\'width\'); svg.removeAttribute(\'height\'); window.saveData.svg = svg.outerHTML; }); }, onLibraryChange: (items) => { window.saveData = window.saveData || {}; window.saveData.libraryItems = items; } })));};const excalidrawWrapper = document.getElementById("app");const root = ReactDOM.createRoot(excalidrawWrapper);root.render(React.createElement(App)); </script></body></html>';
9
+ '<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw.production.min.js"></script></head><body class="excalidraw-container"><div id="app"></div><style> body { display: flex; width: 100vw; height: 100vh; padding: 0; margin: 0;}#app { flex-grow: 1;}.excalidraw .App-menu_top > .Stack.Stack_vertical > div:first-child, .excalidraw .disable-zen-mode, .excalidraw .layer-ui__wrapper__footer-right, .excalidraw .layer-ui__wrapper__github-corner, .excalidraw button.ToolIcon_type_button.ToolIcon.ToolIcon_size_m.Shape.ToolIcon_type_button--show, .excalidraw .library-menu-items-container__items .library-menu-items-container__header, .excalidraw .library-menu-control-buttons, .excalidraw .ToolIcon__library { display: none;} </style><script type="text/javascript"> const App = () => { const data = window.saveData || {}; return React.createElement(React.Fragment, null, React.createElement("div", {style: {height: "100%"},}, React.createElement(ExcalidrawLib.Excalidraw, { initialData: { elements: data.elements || [], libraryItems: data.libraryItems || [], appState: {zenModeEnabled: false}, scrollToContent: false }, onChange: (elements, state, files) => { window.saveData = window.saveData || {}; window.saveData.elements = elements; window.saveData.files = files; ExcalidrawLib.exportToSvg({ elements, state, files }).then(svg => { svg.removeAttribute(\'width\'); svg.removeAttribute(\'height\'); window.saveData.svg = svg.outerHTML; }); }, onLibraryChange: (items) => { window.saveData = window.saveData || {}; window.saveData.libraryItems = items; } })));};const excalidrawWrapper = document.getElementById("app");const root = ReactDOM.createRoot(excalidrawWrapper);root.render(React.createElement(App)); </script></body></html>';
10
10
 
11
11
  export default class Drawing {
12
12
  data = null;
@@ -127,6 +127,7 @@ export default class Drawing {
127
127
  svgContainer.innerHTML = svg;
128
128
 
129
129
  wrapper.innerHTML = '';
130
+ wrapper.classList.remove('empty');
130
131
  wrapper.appendChild(svgContainer.childNodes[0]);
131
132
 
132
133
  const captionEl = document.createElement('div');
@@ -145,7 +146,7 @@ export default class Drawing {
145
146
  save(blockContent){
146
147
  const caption = blockContent.querySelector('[contenteditable]');
147
148
  const data = cloneDeep(this.data);
148
- data.caption = caption.innerHTML;
149
+ data.caption = caption ? caption.innerHTML : '';
149
150
  return data;
150
151
  }
151
152
  }