Add feature for moving the current block to another buffer

- The Ctrl/Cmd-S keyboard shortcut now pops up a buffer search dialog that can be used to select a buffer that the block should be moved to. 
- Update `BufferSelector` UI and logic to support moving blocks

docs/changelog.md

@@ -5,6 +5,7 @@ Here are the most notable changes in each release. For a more detailed list of c
 
 ## 2.1.0 (not yet released)
 
+- Added support for moving the current block to another (or new) buffer. Pressing `Ctrl/Cmd+S` will now pop up a dialog where you can search for and select another buffer to which the block will be moved. It's also possible to select to create a brand new buffer to which the block will be moved.
 - Added support for the following languages:
   * Elixir
   * Scala

docs/index.md

@@ -39,7 +39,7 @@ Available for Mac, Windows, and Linux.
 ⌘ + ⌥ + Enter       Split the current block at cursor position
 ⌘ + L               Change block language
 ⌘ + N               Create a new note buffer
-⌘ + S               Create a new note buffer from the current block
+⌘ + S               Move the current block to another (or new) buffer
 ⌘ + P               Open note selector
 ⌘ + Down            Goto next block
 ⌘ + Up              Goto previous block
@@ -58,7 +58,7 @@ Alt + Shift + Enter    Add new block at the start of the buffer
 Ctrl + Alt + Enter     Split the current block at cursor position
 Ctrl + L               Change block language
 Ctrl + N               Create a new note buffer
-Ctrl + S               Create a new note buffer from the current block
+Ctrl + S               Move the current block to another (or new) buffer
 Ctrl + P               Open note selector
 Ctrl + Down            Goto next block
 Ctrl + Up              Goto previous block

shared-utils/key-helper.ts

@@ -10,7 +10,7 @@ export const keyHelpStr = (platform: string) => {
         [`${modChar} + ${altChar} + Enter`, "Split the current block at cursor position"],
         [`${modChar} + L`, "Change block language"],
         [`${modChar} + N`, "Create a new note buffer"],
-        [`${modChar} + S`, "Create a new note buffer from the current block"],
+        [`${modChar} + S`, "Move the current block to another (or new) buffer"],
         [`${modChar} + P`, "Open note selector"],
         [`${modChar} + Down`, "Goto next block"],
         [`${modChar} + Up`, "Goto previous block"],

src/components/App.vue

@@ -5,6 +5,7 @@
     import { useHeynoteStore } from "../stores/heynote-store"
     import { useErrorStore } from "../stores/error-store"
     import { useSettingsStore } from "../stores/settings-store"
+    import { useEditorCacheStore } from '../stores/editor-cache'
 
     import { OPEN_SETTINGS_EVENT, SETTINGS_CHANGE_EVENT } from '@/src/common/constants'
 
@@ -55,6 +56,7 @@
             showBufferSelector(value) { this.dialogWatcher(value) },
             showCreateBuffer(value) { this.dialogWatcher(value) },
             showEditBuffer(value) { this.dialogWatcher(value) },
+            showMoveToBufferSelector(value) { this.dialogWatcher(value) },
 
             currentBufferPath() {
                 this.focusEditor()
@@ -66,14 +68,15 @@
         },
 
         computed: {
-            ...mapStores(useSettingsStore),
+            ...mapStores(useSettingsStore, useEditorCacheStore),
             ...mapState(useHeynoteStore, [
                 "currentBufferPath",
                 "currentBufferName",
                 "showLanguageSelector",
                 "showBufferSelector",
                 "showCreateBuffer",
                 "showEditBuffer",
+                "showMoveToBufferSelector",
             ]),
 
             editorInert() {
@@ -89,6 +92,7 @@
                 "closeDialog",
                 "closeBufferSelector",
                 "openBuffer",
+                "closeMoveToBufferSelector",
             ]),
 
             // Used as a watcher for the booleans that control the visibility of editor dialogs. 
@@ -123,6 +127,11 @@
             formatCurrentBlock() {
                 this.$refs.editor.formatCurrentBlock()
             },
+
+            onMoveCurrentBlockToOtherEditor(path) {
+                this.editorCacheStore.moveCurrentBlockToOtherEditor(path)
+                this.closeMoveToBufferSelector()
+            },
         },
     }
 
@@ -157,8 +166,16 @@
             <BufferSelector 
                 v-if="showBufferSelector" 
                 @openBuffer="openBuffer"
+                @openCreateBuffer="(nameSuggestion) => openCreateBuffer('new', nameSuggestion)"
                 @close="closeBufferSelector"
             />
+            <BufferSelector 
+                v-if="showMoveToBufferSelector" 
+                headline="Move block to..."
+                @openBuffer="onMoveCurrentBlockToOtherEditor"
+                @openCreateBuffer="(nameSuggestion) => openCreateBuffer('currentBlock', nameSuggestion)"
+                @close="closeMoveToBufferSelector"
+            />
             <Settings 
                 v-if="showSettings"
                 :initialSettings="settingsStore.settings"

src/components/BufferSelector.vue

@@ -2,11 +2,14 @@
     import fuzzysort from 'fuzzysort'
 
     import { mapState, mapActions } from 'pinia'
-    import { toRaw } from 'vue';
     import { SCRATCH_FILE_NAME } from "../common/constants"
     import { useHeynoteStore } from "../stores/heynote-store"
 
     export default {
+        props: {
+            headline: String,
+        },
+        
         data() {
             return {
                 selected: 0,
@@ -94,7 +97,6 @@
                 "updateBuffers",
                 "editBufferMetadata",
                 "deleteBuffer",
-                "openCreateBuffer",
             ]),
 
             buildItems() {
@@ -170,9 +172,9 @@
             selectItem(item) {
                 if (item.createNew) {
                     if (this.filteredItems.length === 1) {
-                        this.openCreateBuffer("new", this.filter)
+                        this.$emit("openCreateBuffer", this.filter)
                     } else {
-                        this.openCreateBuffer("new", "")
+                        this.$emit("openCreateBuffer", "")
                     }
                 } else {
                     this.$emit("openBuffer", item.path)
@@ -237,6 +239,7 @@
 <template>
     <form class="note-selector" tabindex="-1" @focusout="onFocusOut" ref="container">
         <div class="input-container">
+            <h1 v-if="headline">{{headline}}</h1>
             <input 
                 type="text" 
                 ref="input"
@@ -310,11 +313,15 @@
         +dark-mode
             background: #151516
             box-shadow: 0 0 10px rgba(0,0,0,0.5)
+            color: rgba(255,255,255, 0.7)
         +webapp-mobile
             max-width: calc(100% - 80px)
 
         .input-container
             padding: 10px
+            h1
+                font-weight: bold
+                margin-bottom: 14px
             input
                 background: #fff
                 padding: 4px 5px

src/components/Editor.vue

@@ -1,5 +1,4 @@
 <script>
-    import { HeynoteEditor } from '../editor/editor.js'
     import { syntaxTree } from "@codemirror/language"
     import { toRaw } from 'vue';
     import { mapState, mapWritableState, mapActions, mapStores } from 'pinia'
@@ -28,6 +27,9 @@
         },
 
         mounted() {
+            // initialize editorCacheStore (sets up watchers for settings changes, propagating them to all editors)
+            this.editorCacheStore.setUp(this.$refs.editor);
+
             this.loadBuffer(this.currentBufferPath)
 
             // set up window close handler that will save the buffer and quit
@@ -46,9 +48,6 @@
             window.heynote.mainProcess.on(WINDOW_CLOSE_EVENT, this.onWindowClose)
             window.heynote.mainProcess.on(REDO_EVENT, this.onRedo)
 
-            // initialize editorCacheStore (sets up watchers for settings changes, propagating them to all editors)
-            this.editorCacheStore.setUp();
-
             // if debugSyntaxTree prop is set, display syntax tree for debugging
             if (this.debugSyntaxTree) {
                 setInterval(() => {
@@ -112,7 +111,7 @@
                     toRaw(this.editor).show()
                 } else {
                     //console.log("create new editor")
-                    this.editor = this.editorCacheStore.createEditor(path, this.$refs.editor)
+                    this.editor = this.editorCacheStore.createEditor(path)
                     this.editorCacheStore.addEditor(path, toRaw(this.editor))
                 }
 

src/components/NewBuffer.vue

@@ -91,7 +91,7 @@
             },
 
             dialogTitle() {
-                return this.createBufferParams.mode === "currentBlock" ? "New Buffer from Block" : "New Buffer"
+                return this.createBufferParams.mode === "currentBlock" ? "Move Block to New Buffer" : "New Buffer"
             },
         },
 

src/editor/annotation.js

@@ -7,3 +7,4 @@ export const SET_CONTENT = "heynote-set-content"
 export const ADD_NEW_BLOCK = "heynote-add-new-block"
 export const DELETE_BLOCK = "heynote-delete-block"
 export const CURSOR_CHANGE = "heynote-cursor-change"
+export const APPEND_BLOCK = "heynote-append-block"

src/editor/block/block.js

@@ -169,8 +169,9 @@ const blockLayer = layer({
                 idx++;
                 return
             }
-            const fromCoordsTop = view.coordsAtPos(Math.max(block.content.from, view.visibleRanges[0].from)).top
-            let toCoordsBottom = view.coordsAtPos(Math.min(block.content.to, view.visibleRanges[view.visibleRanges.length - 1].to)).bottom
+            // view.coordsAtPos returns null if the editor is not visible
+            const fromCoordsTop = view.coordsAtPos(Math.max(block.content.from, view.visibleRanges[0].from))?.top
+            let toCoordsBottom = view.coordsAtPos(Math.min(block.content.to, view.visibleRanges[view.visibleRanges.length - 1].to))?.bottom
             if (idx === blocks.length - 1) {
                 // Calculate how much extra height we need to add to the last block
                 let extraHeight = view.viewState.editorHeight - (

src/editor/editor.js

@@ -12,7 +12,7 @@ import { getFontTheme } from "./theme/font-theme.js";
 import { customSetup } from "./setup.js"
 import { heynoteLang } from "./lang-heynote/heynote.js"
 import { noteBlockExtension, blockLineNumbers, blockState, getActiveNoteBlock, triggerCursorChange } from "./block/block.js"
-import { heynoteEvent, SET_CONTENT, DELETE_BLOCK } from "./annotation.js";
+import { heynoteEvent, SET_CONTENT, DELETE_BLOCK, APPEND_BLOCK } from "./annotation.js";
 import { changeCurrentBlockLanguage, triggerCurrenciesLoaded, getBlockDelimiter, deleteBlock } from "./block/commands.js"
 import { formatBlockContent } from "./block/format-code.js"
 import { heynoteKeymap } from "./keymap.js"
@@ -127,7 +127,8 @@ export class HeynoteEditor {
 
         //this.setContent(content)
         this.setReadOnly(true)
-        this.loadContent().then(() => {
+        this.contentLoadedPromise = this.loadContent();
+        this.contentLoadedPromise.then(() => {
             this.setReadOnly(false)
         })
 
@@ -166,14 +167,15 @@ export class HeynoteEditor {
         const content = await window.heynote.buffer.load(this.path)
         this.diskContent = content
         this.contentLoaded = true
-        this.setContent(content)
 
         // set up content change listener
         this.onChange = (content) => {
             this.diskContent = content
             this.setContent(content)
         }
         window.heynote.buffer.addOnChangeCallback(this.path, this.onChange)
+
+        await this.setContent(content)
     }
 
     setContent(content) {
@@ -278,6 +280,10 @@ export class HeynoteEditor {
         this.notesStore.openCreateBuffer(createMode)
     }
 
+    openMoveToBufferSelector() {
+        this.notesStore.openMoveToBufferSelector()
+    }
+
     async createNewBuffer(path, name) {
         const data = getBlockDelimiter(this.defaultBlockToken, this.defaultBlockAutoDetect)
         await this.notesStore.saveNewBuffer(path, name, data)
@@ -302,8 +308,35 @@ export class HeynoteEditor {
         // by using requestAnimationFrame we avoid a race condition where rendering the block backgrounds
         // would fail if we immediately opened the new note (since the block UI wouldn't have time to update 
         // after the block was deleted)
-        requestAnimationFrame(() => {
-            this.notesStore.openBuffer(path)
+        //requestAnimationFrame(() => {
+        //    this.notesStore.openBuffer(path)
+        //})
+
+        // add new buffer to recent list so that it shows up at the top of the buffer selector
+        this.notesStore.addRecentBuffer(path)
+        this.notesStore.addRecentBuffer(this.notesStore.currentBufferPath)
+    }
+
+    getActiveBlockContent() {
+        const block = getActiveNoteBlock(this.view.state)
+        if (!block) {
+            return
+        }
+        return this.view.state.sliceDoc(block.range.from, block.range.to)
+    }
+
+    deleteActiveBlock() {
+        deleteBlock(this)(this.view)
+    }
+
+    appendBlockContent(content) {
+        this.view.dispatch({
+            changes: {
+                from: this.view.state.doc.length,
+                to: this.view.state.doc.length,
+                insert: content,
+            },
+            annotations: [heynoteEvent.of(APPEND_BLOCK)],
         })
     }
 

src/editor/keymap.js

@@ -59,7 +59,7 @@ export function heynoteKeymap(editor) {
         ["Alt-ArrowDown", moveLineDown],
         ["Mod-l", () => editor.openLanguageSelector()],
         ["Mod-p", () => editor.openBufferSelector()],
-        ["Mod-s", () => editor.openCreateBuffer("currentBlock")],
+        ["Mod-s", () => editor.openMoveToBufferSelector()],
         ["Mod-n", () => editor.openCreateBuffer("new")],
         ["Mod-Shift-d", deleteBlock(editor)],
         ["Alt-Shift-f", formatBlockContent],

src/main.js

@@ -7,7 +7,6 @@ import App from './components/App.vue'
 import { loadCurrencies } from './currency'
 import { useErrorStore } from './stores/error-store'
 import { useHeynoteStore, initHeynoteStore } from './stores/heynote-store'
-import { useEditorCacheStore } from './stores/editor-cache'
 
 
 const pinia = createPinia()
@@ -20,7 +19,6 @@ app.mount('#app').$nextTick(() => {
 })
 
 const errorStore = useErrorStore()
-const editorCacheStore = useEditorCacheStore()
 //errorStore.addError("test error")
 window.heynote.getInitErrors().then((errors) => {
     errors.forEach((e) => errorStore.addError(e))