motla / vue-document-editor Goto Github PK

Please let me know if I got it wrong. Thank you very much 🙂

Describe the bug
I used the demo example(invoiceTemplate). After modifying the invoice_number on the screen, the variable content in Demo.vue does not change.

To Reproduce
Steps to reproduce the behavior:

1. Clone the git repo
2. Run npm run serve
3. Open Chrome Vue.js devtool or simply add setInterval in Demo.vue (Continously log content variable)
4. Modify the invoice_number in vue-document-editor component
5. Compare the value from log and screen

Expected behavior
Expect data to be reactive between Demo.vue and template

Screenshots

Desktop:

• OS: [Window]
• Browser [Chrome]
• Vue.js version [3]

Describe the bug
I pass in a component by templete, and the data provided by the outermost component cannot be read by inject in the child component.

in parent component:
provide('setting', {a:1,b:1});

in child component:
const setting = inject('setting'); // get nothing

Hello.
I really like the component, but a small bug is confusing.

1. Opening your demo: https://motla.github.io/vue-document-editor/
2. Creating a new clean document
3. Press Backspace
4. The component is broken

It seems that deleting the container in which the editing is taking place leads to an error

Describe the bug
I want to use the component to render the content previously saved by the editor, in a non-editable/read only mode.
Component prop editable suggests // Sets whether document text can be modified.
But setting this prop as false, only sets the wrapper div (ref=content) as contentEditable= false

For subsequent pages in the loop the contentEditable property is decided on the fact if the page object has a template property or not, and since the property is not present (in general case of direct content saving), contentEditable property for page remains true, and it stays editable.

Is it expected to behave this way? Is there any workaround to achieve the non-editable mode?

To Reproduce
Steps to reproduce the behavior:

1. Use :editable="false" prop in component

Code

<vue-document-editor 
        class="editor"
        :editable="false"
                            :style="{
                                height:'80vh',
                                overflowY: 'scroll'
                            }"
                            ref="editor"
                            :content.sync="content"
                            :overlay="overlay"
                            :zoom="zoom"
                            :page_format_mm="page_format_mm"
                            :page_margins="page_margins"
                            :display="display"/>

Expected behavior
Setting editable prop to false should render the full document/all pages non-editable.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Chromium

Thanks!

Describe the bug
When I started editing a new document, I detected two bugs.

First bug. The last div tag in the document disappears when the delete key is continuously entered on an empty TAB. At this point, if I type in the text and enter, the content will not wrap.

The second bug, or in a blank document, if I hit the enter key continuously, it will produce multiple blank lines, at this time, if I use the delete key to delete these empty lines, the deletion operation will not take effect.

I analyzed your code and found a mistake in your logic when dealing with the delete key. Therefore, the above two bugs are generated. Hopefully it will be fixed soon.

Screenshots

Hi,
First of all, vue-document-editor is just great. I'm not a basic JS coder but I'm getting started and looking to integrate into vue-document-editor the possibility of making images draggable and resizable. Have you implemented such a thing? Do you have any ideas, I have already tried vue-draggable-resizable but I must be missing something if you could help me. Thank you and congratulations again for the work accomplished.

"vue": "^2.6.10",
"vue-document-editor": "^1.5.1"

In emit_new_content methods

Describe the bug
This is not a bug but a question abount usage of page formats. Im trying to use another pages format like A5, A5L,etc. it works in editor but, when i click in print, i know that the before_print function is called, the page only show in A4 format in printer viewer browser..do you know what is happining...and in what i can check out to make this work?

To Reproduce
Steps to reproduce the behavior:

1. go to editor
2. click on Format menu
3. Select a format lke a5l,a5,
4. and i click in print and the browser only show the page in a4 form

as u can see bellow. the ditor show correctly the format. but in print the page dont appear in a5 format

after print click

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]
• Vue.js version [e.g. v2.6.11]

Additional context
Add any other context about the problem here.

Describe the bug
Enter key to create new line doesn't seem to work on the demo page

To Reproduce

1. Create a New Document
2. Type a short sentence
3. Press the "Enter" key to create a new line
4. Typed text is deleted

I use tailwindcss and I need to specify h1, ol, ul styles, I do it like this in my component:

<style>
.editor h1 {
  @apply text-3xl;
}
</style>

It works:

But when I press print, the styles are not applied. How can this be fixed?

Thanks

Describe the bug
Backspace key does not work if content only has one page

To Reproduce
Steps to reproduce the behavior:

Modify Demo.vue, change content to

 content: [
        { template: markRaw(InvoiceTemplate), props: { invoice_number: "AB38052985" } },
      ],

Now run the demo and try to delete text with backspace key.

Expected behavior
Backspace key works in all circumstances.

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser Chrome, Firefox
• Version 2.2.1
• Vue.js version 3.2.45

Additional context
This is either caused by the fix for #16 or a failure on my part to understand how the component is used.

is there a way to add header only in the first page. and keep the next pages with normal headers space ?

currently, when in set the header space using page_margins variable it is aapplied to all page.

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
in there a way to add dynamic editable fields? I'm wondering how I can add them to the editor so the user can add dynamic fields on demand.

Additional context
Working on a contract template creator, but I want the user be able to create templates and add dynamic fields according to his needs.

When a large data, for example a 30 page word document is copy-pasted, it is taking almost 3 minutes to finish to create pages, if more than 100 pages, the UI completely hangs, this can be reproduced by copy pasting more than 20-30 pages word document to the editor, also, even 10-15 pages takes ~25 seconds to paste, the issue is identified in the fit_content_over_pages function, the recursive call to the function move_children_forward_recursively is causing the problem
Even the demo link reproduces the said error. Please suggest a fix for this performance issue if possible.
Suggestion -
Does the approach of creating a new div and using it to move word by word to the current page and then moving all the remaining content into the next page at once instead of word by word, and repeat the same for the overflown page work?
Unfortunately I tried to modify the move_children_forward_recursively and fit_content_over_pages function but I have relatively less experience so I am not able to successfully implement the said logic, so it will be helpful to me if you can at least validate the new logic or help me implement it further

Hi, Can you do an example using Global CDN UMD with also vue-file-toolbar-menu
is it as component?
Thank you

The function to create new page, in Vue 2 dont work.

When im writing a text and in overflow the a4 page size. the editor dont create a new page automatcaly.

I found a problem when I use a table element where the content within a second or subsequent column exceeds the height of the previous column within the same row, it may lead to irregular formatting due to page breaks.

Describe the bug
I ran into the same problem with vue.2.7.14, where the previous page exceeded the part hidden behind the next page.

github：https://github.com/1738736002/vue2-demo
Corresponding to page 7 after the project started.

I have another question, why does my 'Hellowrod' component actually have a lot of content, but only render a page of content, and not automatically create a new page.

Hello friends!

I need help.

I would like to use vue-document-editor to issue reports from my system. It has proven to be a great tool, but it has an issue in it that is giving me a headache, which is the page break.

When I generate my report, I don't know how long it will be, whether or not it will fit within a single page. So I would need the library to work on it automatically, separating what goes on one page or another.

Currently all the content is on one page in the view, and some things get messed up.

Does anyone know how to solve this problem?

Best Regards

Hi, I did follow all the demo code you gave me, and I even add:

watch: { content: { immediate: true, // Fill undo / redo history stack on user input handler (new_content) { if(!this._mute_next_content_watcher) { // only update the stack when content is changed by user input, not undo/redo commands this.content_history[++this.undo_count] = new_content; this.content_history.length = this.undo_count + 1; // remove all redo items } this._mute_next_content_watcher = false; } }, }

But my content still not update whenever I edit something in the document. When I try to submit, it submit the unedited document instead of the updated ones, below here is my code reference:

` <cv-modal v-bind="props" :visible="createChecklistModal" :kind="kind" :size="size"
:primaryButtonDisabled="primaryButtonDisabled_CF" :disableTeleport="disableTeleport_CF"
@after-modal-hidden="onAfterModalHidden_CF" @modal-hidden="onModalHidden_CF"
@modal-hide-request="onModalHideRequest_CF" @modal-shown="onModalShown_CF" @primary-click="onPrimaryClickClose"
@secondary-click="onSecondaryClickDiscard" @other-btn-click="onOtherBtnClick_CF" id="checklistModal">

    <template v-slot:title>⚠️ Create template</template>
    <template v-slot:content>
        <!-- <QuillEditor v-model:content="content" style="height: 450px;" toolbar="full" contentType="html">
        </QuillEditor> -->
        <!-- Top bar -->
        <vue-file-toolbar-menu :content="menu" class="bar" />

        <!-- Document editor -->
        <vue-document-editor id="textEditor" class="editor" ref="editor"
        v-model:content="content"
        :overlay="overlay"
        :zoom="zoom"
        :page_format_mm="page_format_mm"
        :page_margins="page_margins"
        :display="display"
        :contenteditable="edit_mode" spellcheck="false" />

        <!-- <div ref="text" class="text" :contenteditable="edit_mode" spellcheck="false" v-html="initial_html"></div> -->

    </template>
    <template v-slot:secondary-button>Back</template>
    <template v-slot:primary-button>Save</template>
</cv-modal>`

Script:

`async onPrimaryClickTemplate() {
        console.log("CREATE TEMPLATE WAS CLICK")

        console.log(this.content);

        if (this.content.length === 0 || (this.content.length === 1 && this.content[0] === '')) {
            const endPoint = process.env.VUE_APP_END_POINT;

            const config = {
                headers: {
                    Authorization: 'Bearer ' + this.currentUser.access_token,
                    'Content-Type': 'application/json', // Set Content-Type to application/json
                },
            };

            try {
                const response = await this.$axios.get(
                    endPoint + '/test/api/addApp/defaultTemplate',
                    config
                );

                const data = response.data.content;
                console.log(response.data.content);
                this.content = [data];

                const currentDate = new Date();
                // Extract day, month, and year
                const day = currentDate.getDate().toString().padStart(2, '0');
                const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
                const year = currentDate.getFullYear();
                const dayText = currentDate.getDate();
                const monthText = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(currentDate);
                const yearText = currentDate.getFullYear();
                const formattedDateText = `${dayText} ${monthText} ${yearText}`;
                const formattedDate = `${day}/${month}/${year}`;
                const roleTypeUpperCase = this.roleType.toUpperCase();
            } catch (error) {
                console.error("Error fetching checklist data:", error);
            }
        }`

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Test in both in version 1.2.6 and 1.2.4.
If the initial content is very large(more than three pages in my case). Then I paste some data from clipboard.
The second page will disappear.

Hello!
I can't edit the page data because the overlay is over the content.

When I click here

If I remove overlay, all works fine. However I need header and footer.

Desktop:

• OS: Windows 11
• Browser: Chrome
• Version: 2.2.1
• Vue.js version: 3.2.45

Describe the bug
After update depencies i have a bug when im try to run watch/dev/build

ERROR in ./node_modules/vue-document-editor/src/DocumentEditor/DocumentEditor.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-document-editor/src/DocumentEditor/DocumentEditor.vue?vue&type=script&lang=js&) 380:61
Module parse failed: Unexpected token (380:61)
File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |
  | // add overlays if any

    const overlay_elt = this.$refs[page.uuid+'-overlay']?.[0];

| if(overlay_elt){

i'm using vuetifyjs-mix-extension loader, and eslint prettier
and i think my loader, or babel transplitter cant load "?." operator, when im delete this new code all going to be ok

my .babelrc
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}

my eslint
module.exports = {
root: true,
env: {
es6: true,
},
parserOptions: {
parser: '@babel/eslint-parser',
sourceType: 'module',
requireConfigFile: false,
},
plugins: ['prettier', 'vue'],
extends: [
'vuetify',
'plugin:vue/recommended', // Use this if you are using Vue.js 2.x.
'plugin:prettier/recommended',
'prettier/vue',
'prettier',
],
rules: {
'vue/max-attributes-per-line': 'off',
'vue/no-use-v-if-with-v-for': 'warn',
'vue/no-side-effects-in-computed-properties': 'warn',
'vuetify/no-deprecated-classes': 'error',
'object-shorthand': ['error', 'always'],
},
}

Desktop (please complete the following information):

• OS: Linux Mint

Additional context
Add any other context about the problem here.

I think this project could be very valuable to me. If you can enable sponsorship, I'd be happy to sponsor some work on this project.

There are a few features I can think of that I would need, but one of the main features that I would be looking to see is exporting to a Word (.doc or .docx) document. I know this will likely be very challenging.

Another feature that would be very useful, and probably signicantly easier would be variable placeholders, (using a document as a template).

Again, thanks for the awesome project. I'm very interested in seeing it succeed.

Thank you, this project is really great.
Is there a way to make css page-break-inside:avoid works to the editor?

o editor começa a travar apartir de 10 páginas, não sendo possível continuar.
observei que a renderização de páginas acontece a cada letra digitada.

How to export a docx file

Hello,
I would like to transcribe your demo.vue page into <script setup> format. I block at the watcher level with this._mute_next_content_watcher. Can you tell me what this corresponds to? I did a search in your project and I can't find it anywhere else. If you wish, I could give you the source code for those who are interested.
Thank you

I use a vue template to create some uneditable fields just like InvoiceTemplate.vue.
But I found that the content template can not larger than one page, so is that possible to have a multi-page template?

Icon appear as text even after installing dependency

I use this for so long, and it works perfectly well but somehow lately the icon did not appear and it appear as text. please help look into this matter and help me solve this. Thank you

** It is a sentence written using a translation program. Please forgive me.

Describe the bug
The page number overlay does not appear on the last page. (Inside the modal)

To Reproduce
Steps to reproduce the behavior:

1. Import components(Demo.vue) from within the Modal.
2. On the browser screen, you can see that the last page overlay appears.
3. Press the Print button.
4. You can see that there is no page number overlay on the last page.

Expected behavior
As a result of the test, the problem occurred only inside the Modal and no problem outside the Modal.
But I thought it might be a problem because it was different from the template environment I was using.

Screenshots
[If applicable, add screenshots to help explain your problem.
https://imgur.com/a/b1Ye5b2

Desktop (please complete the following information):

• OS: Windows 11 Pro
• Browser : Chrome, Edge
• Version : Chrome : 111.0.5563.110 / Edge : 111.0.1661.44
• Vue.js version : 3.2.45

Additional context
I am a novice developer, and I am working on a project using a template.
Templates use Vue3, TypeScript, and Vite.
This environment seems to be causing problems, but I couldn't find them with my ability.
Here's the github repertoire that reproduced my problem.
https://github.com/malgirlim/Print-Test

It's a really great solution, so I want to solve the problem and use it.
Please give me a little help. Thank you.

Hi. This component is very interesting.

I'm trying to use Demo.vue page in a blank Vue 3 project. But, I found some issues, probably in the conversion or something like that.

Is compatible or is there an example of how to use it?

Is there a way to make a layout in 2 columns? As shown in the image, where the text follows the flow of the arrow, ending at the bottom of the page and starting in the next column at the top.

Hi there,
Thanks for creating this awesome package!
I would like to know how do we able to adjust the line height of the paragraph?
Because according to the DEMO, I can't find any clue how to achieve this with the toolbar.
Please advise.

Upload pictures
base64 or online upload, or local upload, or ctrl+v upload

Add Table
Slide the mouse into rendering n rows and n columns, select and merge cells, add and delete columns and rows, and drag the mouse to adjust the height of rows

Add a comment
You can select one or more words for a paragraph of text, or add comments to it by overlapping it

Implementation document directory
Document directory similar to Word

Add Referenced Paragraph
Click the pop-up window and select a paragraph of text to render to the last out of focus position of the editor

Can I export it into a docs file

Hi @motla

I don't want this page break to happen for my sections.

I am unable to prevent this behavior via CSS alone, as it seems that vue-document-editor does not seem to take into consideration page-break-before, page-break-after or page-break-inside. What do I need to do?

Ps.: My sections are in <section> elements.

Good morning,
When I want to test vue-document-editor, the layout is not taken into account.
I copied the demo.vue file and InvoiceTemplate.ce.vue which I placed in my sources but all the css that is in InvoiceTemplate.ce.vue is not interpreted.
Do you have any idea of the reason?
THANKS

I would like to have multiple components per page.
Is that possible ?

O texto do cabeçalho sobrepou o texto, o editor não redimensiona automaticamente.