Vue Editor rowResizing?

[Hwang]

Hello, I have a question about the rowResizing feature.

Is the rowResizing feature available in ProseMirror when creating tables with the Editor?
If ProseMirror doesn't support rowResizing, is there a way to implement this feature?

[Vessy]

Hello, Hwang,

You can use the ProseMirror resizing plugin in the Editor in order to enable this functionality. Below you can see a sample demonstrating a possible way to implement this functionality in the Editor:

• https://stackblitz.com/edit/hmvjvy-h3wvu1?file=src%2Fmain.vue 

Here is a list of the main points in the implementation of the scenario:

1. We need to use the columnResizing plugin which is imported as follows:
   

   import { columnResizing } from 'prosemirror-tables';

2. To load the plugin, we have the following extendView method:
   

   extendView(event) {
     const state = event.viewProps.state;
     const plugins = [...state.plugins, columnResizing({})];
     const editorDocument = event.dom.ownerDocument;
   
     return new ProseMirror.EditorView(
       {
         mount: event.dom,
       },
       {
         ...event.viewProps,
         state: ProseMirror.EditorState.create({
           doc: state.doc,
           plugins,
         }),
       }
     );
   }

3. The default edit mode of the Editor should be set to 'div':
   

   :default-edit-mode="'div'"

4. Some additional CSS classes should be added as follows:
   

   .ProseMirror .tableWrapper {
     overflow-x: auto;
     margin: 1em 0;
   }
   
   .ProseMirror table {
     margin: 0;
     border-collapse: collapse;
     table-layout: fixed;
     width: 100%;
     overflow: hidden;
   }
   
   .ProseMirror td,
   .ProseMirror th {
     min-width: 1em;
     border: 1px solid #ddd;
     padding: 3px 5px;
     vertical-align: top;
     box-sizing: border-box;
     position: relative;
   }
   
   .ProseMirror th {
     font-weight: bold;
     text-align: left;
   }
   
   .ProseMirror .column-resize-handle {
     position: absolute;
     right: -2px;
     top: 0;
     bottom: 0;
     width: 4px;
     z-index: 20;
     background-color: #adf;
     pointer-events: none;
   }
   
   .ProseMirror.resize-cursor {
     cursor: ew-resize;
     cursor: col-resize;
   }
   
   /* Give selected cells a blue overlay */
   .ProseMirror .selectedCell:after {
     z-index: 2;
     position: absolute;
     content: '';
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background: rgba(200, 200, 255, 0.4);
     pointer-events: none;
   }

 

Please check the provided example and let me know if you have questions about the suggested implementation.

If you need further assistance with the current ticket, we will be happy to help you.

 

Regards,
Vessy
Progress Telerik

[Hwang]

Hello, Vessy

Thank you for your response.

However, what I was looking for was the rowResizing function. I've already applied the columnResizing function,
but I'm wondering if it's possible to implement a feature that adjusts the height of cells by adjusting rows.

[Vessy]

Hey, Hwang,

I am afraid that row resizing is not supported by the ProseМirror at the moment, therefore the only possible option I can suggest you is to submit an enhancement request and the ProseMirror repo so they can consider its implementation:

• https://github.com/ProseMirror/prosemirror-tables/issues 

[Sachan]

What are the available options for requesting an enhancement to support row resizing in ProseMirror?

[Mari]

The rowResizing feature isn't directly included in ProseMirror's core functionality for table editing. However, ProseMirror is quite flexible and extensible, so there might be community-built plugins or extensions that offer this capability. It's worth exploring the latest documentation or reaching out to the community forums to see if there have been any developments in this area since my last update. If not, you might need to consider building custom functionality to achieve row resizing in your ProseMirror setup.

[Vessy]

Hi, guys,

Thanks a lot for the shared feedback, Mari, but achieving that will require replacing of the core-logic of the Editor, which will be a major breaking change and is not considered as an option for the moment.

As for the ProseMirror enhancements - they can be submitted directly in their github repo linked in my previous reply.

Regards,

Vessy

 

[heather]

Thank you, it's all good now