;
+ props: { editable: boolean };
+}
+
+export default function useUpdatePageELTs(
+ { contentRef, pages, pageStyle, printingMode, props }: UseUpdatePageELTsParams,
+) {
+ // Update pages from this.pages data
+ const updatePagesELTs = () => {
+ // Removing deleted pages
+ const deletedPages = [
+ ...contentRef.value?.children ?? []
+ ].filter((elt) => {
+ !pages.value.find((page) => (page.elt === elt));
+ });
+
+ for (const deletedPage of deletedPages) {
+ deletedPage.remove();
+ }
+
+ // Adding / updating pages
+ for (const [ pageIndex, page ] of pages.value.entries()) {
+ // Get either existing page_elt or create it
+ if (!page.elt) {
+ page.elt = document.createElement('div');
+ page.elt.className = 'page';
+ page.elt.dataset.isVDEPage = '';
+ const nextPage = pages.value[pageIndex + 1];
+ contentRef.value?.insertBefore(page.elt, nextPage ? nextPage.elt : null);
+ }
+
+ // Update page properties
+ page.elt.dataset.contentIdx = page.content_idx;
+ if (!printingMode.value) {
+ page.elt.style = Object
+ .entries(pageStyle(pageIndex, !page.template))
+ .map(([ k, v ]) => {
+ return k.replace(/[A-Z]/g, match => ('-' + match.toLowerCase())) + ':' + v;
+ })
+ .join(';');
+ }
+
+ // (convert page_style to CSS string)
+ page.elt.contentEditable = (props.editable && !page.template);
+ }
+ };
+
+ return {
+ updatePagesELTs,
+ };
+}
diff --git a/src/main.js b/src/main.ts
similarity index 72%
rename from src/main.js
rename to src/main.ts
index 4599bee..c2bf273 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -4,6 +4,6 @@ import Demo from './Demo/Demo.vue'
const app = createApp(Demo);
// enable devtools for the demo
-app.config.devtools = true;
+// app.config.devtools = true;
-app.mount('#app');
\ No newline at end of file
+app.mount('#app');
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..3804a43
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
diff --git a/src/styles/document-editor.css b/src/styles/document-editor.css
new file mode 100644
index 0000000..2ba89a5
--- /dev/null
+++ b/src/styles/document-editor.css
@@ -0,0 +1,81 @@
+.editor {
+ display: block;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ cursor: default;
+}
+
+.editor ::-webkit-scrollbar {
+ width: 16px;
+ height: 16px;
+}
+
+.editor ::-webkit-scrollbar-track,
+.editor ::-webkit-scrollbar-corner {
+ display: none;
+}
+
+.editor ::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 5px solid transparent;
+ border-radius: 16px;
+ background-clip: content-box;
+}
+
+.editor ::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.editor .hide_children > * {
+ display: none;
+}
+
+.editor > .content {
+ position: relative;
+ outline: none;
+ margin: 0;
+ padding: 0;
+ min-width: 100%;
+ pointer-events: none;
+}
+
+.editor > .content > :deep(.page) {
+ position: absolute;
+ box-sizing: border-box;
+ left: 50%;
+ transform-origin: center top;
+ background: var(--page-background, white);
+ box-shadow: var(--page-box-shadow, 0 1px 3px 1px rgba(60, 64, 67, 0.15));
+ border: var(--page-border);
+ border-radius: var(--page-border-radius);
+ transition: left 0.3s, top 0.3s;
+ overflow: hidden;
+ pointer-events: all;
+}
+
+.editor > .content[contenteditable],
+.editor > .content :deep(*[contenteditable]) {
+ cursor: text;
+}
+
+.editor > .content :deep(*[contenteditable=false]) {
+ cursor: default;
+}
+
+.editor > .overlays {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ min-width: 100%;
+ pointer-events: none;
+}
+
+.editor > .overlays > .overlay {
+ position: absolute;
+ box-sizing: border-box;
+ left: 50%;
+ transform-origin: center top;
+ transition: left 0.3s, top 0.3s;
+ overflow: hidden;
+ z-index: 1;
+}
diff --git a/src/utils/createStyleElement.ts b/src/utils/createStyleElement.ts
new file mode 100644
index 0000000..39f0072
--- /dev/null
+++ b/src/utils/createStyleElement.ts
@@ -0,0 +1,5 @@
+export default () => {
+ const style = document.createElement('style');
+ document.head.appendChild(style);
+ return style;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8b555e2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "esnext",
+ "strict": true,
+ "jsx": "preserve",
+ "moduleResolution": "node",
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "forceConsistentCasingInFileNames": true,
+ "useDefineForClassFields": true,
+ "sourceMap": true,
+ "baseUrl": ".",
+ "types": [
+ "webpack-env"
+ ],
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": [
+ "esnext",
+ "dom",
+ "dom.iterable",
+ "scripthost"
+ ]
+ },
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "src/**/*.vue",
+ "tests/**/*.ts",
+ "tests/**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}