Skip to content

Commit 27ede0e

Browse files
motlamotla
committed
1.1.1
1 parent ef8c0fa commit 27ede0e

21 files changed

+176
-152
lines changed

‎CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## v1.1.1
2+
3+
- Bugfix [Issue 2](https://github.com/motla/vue-document-editor/issues/2): Enter key to create new line doesn't seem to work on the demo site
4+
- Bugfix: restoring a new document when user wipes out the entire document
5+
16
## v1.1.0
27

38
- Undo/Redo mechanism moved to Demo.vue in order to let custom implementation in application

‎dist/vue-document-editor.common.js

+64-57
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-document-editor.common.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-document-editor.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-document-editor.umd.js

+64-57
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-document-editor.umd.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-document-editor.umd.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-document-editor.umd.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/css/app.8f0546f9.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/css/app.fdf244b6.css

-1
This file was deleted.

‎docs/css/chunk-vendors.50931070.css renamed to ‎docs/css/chunk-vendors.1a71c468.css

File renamed without changes.

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-document-editor</title><link href=css/app.fdf244b6.css rel=preload as=style><link href=css/chunk-vendors.50931070.css rel=preload as=style><link href=js/app.0b7f730a.js rel=preload as=script><link href=js/chunk-vendors.c0a36aaf.js rel=preload as=script><link href=css/chunk-vendors.50931070.css rel=stylesheet><link href=css/app.fdf244b6.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-document-editor doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.c0a36aaf.js></script><script src=js/app.0b7f730a.js></script></body></html>
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-document-editor</title><link href=css/app.8f0546f9.css rel=preload as=style><link href=css/chunk-vendors.1a71c468.css rel=preload as=style><link href=js/app.ca0dc05b.js rel=preload as=script><link href=js/chunk-vendors.c0a36aaf.js rel=preload as=script><link href=css/chunk-vendors.1a71c468.css rel=stylesheet><link href=css/app.8f0546f9.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-document-editor doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.c0a36aaf.js></script><script src=js/app.ca0dc05b.js></script></body></html>

‎docs/js/app.0b7f730a.js

-2
This file was deleted.

‎docs/js/app.0b7f730a.js.map

-1
This file was deleted.

‎docs/js/app.ca0dc05b.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.ca0dc05b.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-document-editor",
3-
"version": "1.1.0",
3+
"version": "1.1.1",
44
"description": "Paper-sized WYSIWYG document editor for Vue apps",
55
"author": {
66
"name": "Romain Lamothe",
@@ -49,9 +49,6 @@
4949
"vue-file-toolbar-menu": "^1.1.0",
5050
"vue-template-compiler": "^2.6.11"
5151
},
52-
"peerDependencies": {
53-
"sass-loader": ">=8.0.2"
54-
},
5552
"eslintConfig": {
5653
"root": true,
5754
"env": {

‎src/Demo/Demo.vue

+7-6
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,20 @@ export default {
4646
},
4747
4848
created () {
49-
// initialize gesture flags
49+
// Initialize gesture flags
5050
let start_zoom_gesture = false;
5151
let start_dist_touch = false;
5252
let start_zoom_touch = false;
5353
54-
// manage ctrl+scroll zoom (or trackpad pinch)
54+
// Manage ctrl+scroll zoom (or trackpad pinch)
5555
window.addEventListener("wheel", (e) => {
5656
if(e.ctrlKey){
5757
e.preventDefault();
5858
this.zoom = Math.min(Math.max(this.zoom - e.deltaY * 0.01, this.zoom_min), this.zoom_max);
5959
}
6060
}, { passive: false });
6161
62-
// manage trackpad pinch on Safari
62+
// Manage trackpad pinch on Safari
6363
window.addEventListener("gesturestart", (e) => {
6464
e.preventDefault();
6565
start_zoom_gesture = this.zoom;
@@ -74,7 +74,7 @@ export default {
7474
start_zoom_gesture = false;
7575
});
7676
77-
// manage pinch to zoom
77+
// Manage pinch to zoom for touch devices
7878
window.addEventListener("touchstart", (e) => {
7979
if (e.touches.length == 2) {
8080
e.preventDefault();
@@ -309,8 +309,9 @@ export default {
309309
watch: {
310310
content: {
311311
immediate: true,
312+
// Fill undo / redo history stack on user input
312313
handler (new_content) {
313-
if(!this._mute_next_content_watcher) {
314+
if(!this._mute_next_content_watcher) { // only update the stack when content is changed by user input, not undo/redo commands
314315
this.content_history[++this.undo_count] = new_content;
315316
this.content_history.length = this.undo_count + 1; // remove all redo items
316317
}
@@ -337,7 +338,7 @@ body {
337338
width: 16px;
338339
height: 16px;
339340
}
340-
::-webkit-scrollbar-track {
341+
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
341342
display: none;
342343
}
343344
::-webkit-scrollbar-thumb {

‎src/DocumentEditor/DocumentEditor.vue

+23-16
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@
33

44
<!-- Document editor -->
55
<div class="content" ref="content" :contenteditable="editable" :style="page_style(-1)" @input="input" @keyup="process_current_text_style">
6-
<!-- Dummy page that is empty, only to measure the pages_height in px -->
7-
<div ref="dummy_page" class="page" :style="page_style(0)"></div>
8-
96
<!-- Contains every page of the document (can be modified by the DOM afterwards) -->
107
<div v-for="(page, page_idx) in pages" class="page"
118
:key="page.uuid" :ref="page.uuid" :data-content-idx="page.content_idx"
@@ -108,24 +105,27 @@ export default {
108105
109106
// Resets all content from the content property
110107
async reset_content () {
111-
// get page height from dummy page
112-
await this.$nextTick(); // wait for DOM update
113-
this.$refs.dummy_page.style.display = "block";
114-
this.pages_height = this.$refs.dummy_page.clientHeight + 1; // allow one pixel precision
115-
this.$refs.dummy_page.style.display = "none";
116-
117108
// delete all pages and set one new page per content item
118109
this.pages = this.content.length ? this.content.map((content, content_idx) => ({
119110
uuid: content_idx,
120111
content_idx,
121112
template: content.template,
122113
props: content.props
123114
})) : [{ uuid: 0, content_idx: 0 }]; // if content is empty
115+
116+
// get page height from first empty page
124117
await this.$nextTick(); // wait for DOM update
125-
for(const page of this.pages) { // initialize text pages
118+
const first_page_elt = this.$refs[this.pages[0].uuid][0];
119+
if(!this.$refs.content.contains(first_page_elt)) this.$refs.content.appendChild(first_page_elt); // restore page in DOM in case it was removed
120+
this.pages_height = first_page_elt.clientHeight + 1; // allow one pixel precision
121+
122+
// initialize text pages
123+
for(const page of this.pages) {
126124
const page_elt = this.$refs[page.uuid][0];
127-
if(!this.content[page.content_idx]) page_elt.innerHTML = "";
125+
if(!this.content[page.content_idx]) page_elt.innerHTML = "<div><br></div>";
128126
else if(typeof this.content[page.content_idx] == "string") page_elt.innerHTML = "<div>"+this.content[page.content_idx]+"</div>";
127+
// (else content is a component that is set in Vue.js <template>)
128+
if(!this.$refs.content.contains(page_elt)) this.$refs.content.appendChild(page_elt); // restore page in DOM in case it was removed
129129
}
130130
131131
// spread content over several pages if it overflows
@@ -137,10 +137,10 @@ export default {
137137
138138
// Spreads the HTML content over several pages until it fits
139139
async fit_content_over_pages () {
140-
// this.pages_height must have been set before calling this function
140+
// Data variable this.pages_height must have been set before calling this function
141141
if(!this.pages_height) return;
142142
143-
// check that pages were not deleted from the DOM (start from the end)
143+
// Check that pages were not deleted from the DOM (start from the end)
144144
for(let page_idx = this.pages.length - 1; page_idx >= 0; page_idx--) {
145145
const page = this.pages[page_idx];
146146
const page_elt = this.$refs[page.uuid][0];
@@ -149,6 +149,12 @@ export default {
149149
if(!document.body.contains(page_elt)) this.pages.splice(page_idx, 1);
150150
}
151151
152+
// If all the document was wiped out, start a new empty document
153+
if(!this.pages.length){
154+
this.reset_content();
155+
return;
156+
}
157+
152158
// Save current selection by inserting empty HTML elements at the start and the end of it
153159
const selection = window.getSelection();
154160
const start_marker = document.createElement("null");
@@ -160,7 +166,7 @@ export default {
160166
range.insertNode(end_marker);
161167
}
162168
163-
// browse every remaining page
169+
// Browse every remaining page
164170
let prev_page_modified_flag = false;
165171
for(let page_idx = 0; page_idx < this.pages.length; page_idx++) { // page length can grow inside this loop
166172
const page = this.pages[page_idx];
@@ -201,8 +207,9 @@ export default {
201207
}
202208
}
203209
}
210+
204211
205-
// restore selection and remove empty elements
212+
// Restore selection and remove empty elements
206213
if(document.body.contains(start_marker)){
207214
const range = document.createRange();
208215
range.setStart(start_marker, 0);
@@ -213,7 +220,7 @@ export default {
213220
if(start_marker.parentElement) start_marker.parentElement.removeChild(start_marker);
214221
if(end_marker.parentElement) end_marker.parentElement.removeChild(end_marker);
215222
216-
// normalize and store current page HTML content
223+
// Normalize and store current page HTML content
217224
for(const page of this.pages) {
218225
const page_elt = this.$refs[page.uuid][0];
219226
page_elt.normalize(); // normalize HTML (merge text nodes)

‎src/DocumentEditor/imports/doc-editor-default-styles.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
height: 16px;
1010
}
1111

12-
::-webkit-scrollbar-track {
12+
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
1313
display: none;
1414
}
1515

‎src/DocumentEditor/imports/page-transition-mgmt.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function move_children_forward_recursively (child, child_sibling, stop_condition
5050
}
5151

5252
// if it is a node with no content (e.g. <img>), or a header title (e.g. <h1>) we simply move it
53-
else if (!sub_child.childNodes.length || sub_child.tagName.match(/h\d/i)) {
53+
else if(!sub_child.childNodes.length || sub_child.tagName.match(/h\d/i)) {
5454
// just prevent moving the last child of the page
5555
if(!not_first_child){
5656
console.log("Move-forward: first child reached with no stop condition. Aborting");

0 commit comments

Comments
 (0)