How to make EVERYTHING draggable...

[rchrdnsh]

Getting your advanced example up and running ok for the most part, but now I'm getting into making custom components and adding features, etc...

First thing is I am trying to convert your editable component into one with more than one input field (haven't started that yet) but to also make it draggable, like the counter.

Here is the component as it stands:

<script lang="ts">
  import type { NodeViewProps } from '@tiptap/core';
  import { NodeViewWrapper, NodeViewContent } from 'svelte-tiptap';

  export let selected: NodeViewProps['selected'] = false;
</script>

<NodeViewWrapper
  id='svelte-component'
  class={`editable-component-wrapper ${selected ? `selected-editable-component-wrapper` : ``}`}
  data-drag-handle=''
>
  <div class='box'>
    <NodeViewContent class='' />
  </div>
</NodeViewWrapper>

<style>
  :global(.editable-component-wrapper) {
    border: 1px solid red;
    padding: 16px;
  }

  :global(.selected-editable-component-wrapper) {
    border: 1px solid green;
  }

  .box {
    width: 100%;
    height: 32px;
    border: 1px dashed #aaa;
    border-radius: 8px;
    display: grid;
    align-items: center;
    padding-left: 8px;
  }
</style>

and how it is defined in the SvelteExtension.ts file:

export const SvelteEditableExtension = Node.create({
  name: 'SvelteEditableComponent',
  group: 'block',
  atom: true,
  draggable: true,
  inline: false,
  content: 'inline*',

  parseHTML() {
    return [{ tag: 'svelte-editable-component' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ['svelte-editable-component', mergeAttributes(HTMLAttributes), 0];
  },

  addNodeView() {
    return SvelteNodeViewRenderer(EditableComponent);
  },
});

...as I basically tried to copy what the counter is doing, as it does indeed drag and drop.

But with the code as it is the Editable component does not drag and drop, and I'm not sure what alter or add to make it work...

I'm still learning TipTap as well so it might be something there, I dunno.

Any thoughts or advice you can share will be appreciated, thank you :-)

[rchrdnsh]

ooof, that doesn't even work anymore as an editable text field...as soon as i click it it's 'selected'....I guess...cannot edit the text then...

[sibiraj-s]

Can you check this section out?

https://github.com/sibiraj-s/svelte-tiptap#dragging

You will need to add draggable to the extension and add attribute data-drag-handle=" to the NodeViewWrapper. This will make the node draggable

[sibiraj-s]

oh. I think you got that part right. Let me check.

[sibiraj-s]

Its an issue with tiptap itself I guess. Ref ueberdosis/tiptap#3199

[sibiraj-s]

One way to make and editable nodeview draggable is to have a non contentediable element inside the editable nodeview by explicitly setting contenteditable=false on the element which can act as drag handle. See the example https://sibiraj-s.github.io/svelte-tiptap/, where all nodeviews are draggable