Reimplement "clipboard-image-paste" into streams-plugin default editor?

Developers
#1

In the vanilla tiddlywiki editor (specifically when editing wikitext tiddlers; possibly others) if you have an image in your clipboard and ‘paste’ it will have a small popup window that allows you to immediately import an a image tiddler based on the clipboard contents, and then it references the imported image tiddler where where your cursor was. I like this functionality a lot.

However; this behavior doesn’t seem to carry over into the ‘streams’ plugin default editor; which does a good bit of hacking on the vanilla editor to allow all the outliner-type stuff.

I tried to see if I could modify the streams plugin to get this paste-image behavior back into the streams editor but I wasn’t able to figure out how to do this; do you know if this is possible at all or is the streams editor too different from the vanilla one?

Just let me know, thanks!

-Xyvir

1 Like
#2

Here is a link to the streams demo-site:

Streams — on TiddlyWiki 5.2.2

#3

Cool idea, so I searched the source code.

  • Import images and insert them into the editor.
  • $:/language/Import/Editor/Import/Heading
  • $:/core/ui/EditorToolbar/file-import
  • importState
  • $:/core/ui/EditTemplate/body/default
  • importFileActions
  • $:/core/ui/EditTemplate/body/default
    • $:/config/EditTemplateBodyFilters/default
    • $:/tags/EditTemplateBodyFilter
    • $:/core/ui/EditTemplate/body
      • $:/tags/EditTemplate
      • $:/core/ui/EditTemplate
        • …
  • iframe.streams-editor tc-edit-texteditor tc-edit-texteditor-body
    • .streams-editor
    • $:/plugins/sq/streams/editor-template
      • $streams-edit
      • $:/plugins/sq/streams/templates/stream-row-template
        • …

tldr:

Try the following modifications, but I’m not sure if they will work.

  • $:/plugins/sq/streams/editor-template
    • (copy from $:/core/ui/EditTemplate/body/default)
      • \define importFileActions …
      • wrap $streams-edit
        • $vars importTitle…
        • $dropzone importTitle…
    • (copy from $:/core/ui/EditTemplate/body/editor)
      • $streams-edit
        • fileDrop=yes
        • $list $:/tags/EditorTools …
  • stylesheet
    • .stream-node-block div.tc-editor-toolbar {display:unset}
    • .stream-node-block .tc-editor-toolbar >:not(.tc-editor-importpopup) {display:none}

(Thanks to the compatibility of the original author’s widget design)

details:
  • “clipboard-image-paste”
    • (paste event?)
      • …
    • “Import images and insert them into the editor.”
      • $:/language/Import/Editor/Import/Heading
      • $:/core/ui/EditorToolbar/file-import
        • $reveal importState …
          • $:/core/ui/EditTemplate/body/default
        • <<buttons>>
          • $button
            message=“tm-perform-import”
            actions=<<postImportActions>>
        • <<postImportActions>>
          • $action-sendmessage
            $message=“tm-edit-text-operation”
            $param=“insert-text”
            text=<<imageTitle>>
        • tm-edit-text-operation
          • $:/core/modules/editor/factory.js
            • handleEditTextOperationMessage
      • $:/core/ui/EditTemplate/body/default
        • $dropzone importFileActions …
        • $:/core/ui/EditTemplate/body/editor
          • $edit
            • fileDrop=…
            • $list $:/tags/EditorTools …
              • $:/core/ui/EditorToolbar/file-import
  • streams-plugin default editor
    • iframe.streams-editor tc-edit-texteditor tc-edit-texteditor-body
      • …
      • $streams-edit
    • $:/plugins/sq/streams/streams-edit
      • exports.baseClass = "edit";
    • $:/core/modules/widgets/edit.js
      • this.makeChildWidgets([{ type: "edit-" + this.getEditorType(),
        • $edit-text
      • …
    • $:/core/modules/editor/factory.js
      • handlePasteEvent
      • …