feat: jump to the flake just edited

Author: idlist

README.md

@@ -2,9 +2,9 @@
 
 An Obsidian plugin to put small notes / stickies / cards in a dedicated file, and manage them in masonry layout.
 
-A "flake" means a small piece of note, and a "flakepile" is a pile of those flakes.
+A "flake" refers to a small piece of note, and a "flakepile" is a pile of those flakes.
 
-Can be used to store ideas, diaries, code snippets, and more.
+Can be used to collect ideas, diaries, code snippets, and more.
 
 *The preview image is in horizontal layout. You can change this to vertical layout.*
 
@@ -20,7 +20,9 @@ I don't want 100 `.md` files with 1 sentence each.
 
 ## Installation
 
-The plugin is not published as Obsidian's community plugin yet. Please use [BRAT](https://github.com/TfTHacker/obsidian42-brat) to install the plugin, or copy the files under the release tag to the plugin folder of your Obsidian application. You can also [build it from source](#build-from-source).
+The plugin is not published as Obsidian's community plugin [yet](https://github.com/obsidianmd/obsidian-releases/pull/9533).
+
+Please use [BRAT](https://github.com/TfTHacker/obsidian42-brat) to install the plugin, or copy the files under the release tag to the plugin folder of your Obsidian application. You can also [build it from source](#build-from-source).
 
 ## Tech Stack
 
@@ -57,10 +59,10 @@ Inside a flakepile:
 
 Obsidian-wise:
 
-- [x] "Create new flakepile" file menu option
+- [x] "New flakepile" command & file menu option.
 - [x] "Flake count" status bar item [1]
 - Limited support to internal plugins
-  - [x] Preview other markdown file
+  - [x] Preview other markdown files via `[[file link]]`
   - [x] Jump to global search when clicking on a tag
 
 [1] Due to the nature of this plugin, other status bar items are hidden in flakepile view. Please let me know if you think some status bar item should be displayed.
@@ -103,6 +105,10 @@ npm run build     // Build for production
 
 WHen running `npm run build`, the output files will be copied to `dist` folder.
 
+## Changelog
+
+[Changelog for pre-1.0 versions](docs/changelog_pre1.0.md)
+
 ## License
 
 MIT © i'DLisT 2026

docs/changelog_pre1.0.md

@@ -0,0 +1,7 @@
+# Changelog (pre 1.0)
+
+## 0.1.4
+
+- When finish editing, jump to the flake just edited when finish editing (so that the flake is still trackable when reflow happens).
+- Adjusted the style of lists in rendered markdown. Disabled the toggling behavior of task items (`- []`) as it is not meant to be live editable.
+- Added "New flakepile" command to command palette. (#1)

src/app.ts

@@ -120,6 +120,13 @@ export class FlakepileApp extends TextFileView {
   hydrateMarkdown(rendered: HTMLElement) {
     const sourcePath = this.file!.path
 
+    // Disable input of task item checkbox.
+    const taskItemChechboxes = rendered.querySelectorAll('.task-list-item>input')
+
+    taskItemChechboxes.forEach((element) => {
+      element.setAttrs({ disabled: true })
+    })
+
     // Support internal links.
     rendered.on('click', 'a.internal-link', (e, target) => {
       const linktext = target.getAttribute('data-href')

src/globals.scss

@@ -59,10 +59,22 @@
 .fp-markdown {
 
   p,
-  pre {
+  pre,
+  ul,
+  ol {
     margin: 0.5rem 0;
   }
 
+  ul,
+  ol {
+    padding-inline-start: 2rem;
+  }
+
+  li.task-list-item>input {
+    vertical-align: middle;
+    transform: translateY(-2px);
+  }
+
   h1,
   h2,
   h3,

src/main.ts

@@ -22,14 +22,23 @@ export default class Flakepiles extends Plugin {
 
       menu.addItem((item) => {
         item
-          .setTitle('Create new flakepile')
+          .setTitle('New flakepile')
           .setIcon('sticker')
           .onClick(async () => {
             await this.createFlakepileFile(file)
           })
       })
     }))
 
+    // Register "New flakepile" command.
+    this.addCommand({
+      id: 'new',
+      name: 'Create a new flakepile',
+      callback: async () => {
+        await this.createFlakepileFile()
+      },
+    })
+
     // Register status bar item.
     this.flakeCount = this.addStatusBarItem()
 

src/utils.ts

@@ -26,9 +26,7 @@ export const useElementBorderSize = (target: MaybeComputedElementRef) => {
   return useElementSize(target, { width: 0, height: 0 }, { box: 'border-box' })
 }
 
-export const noopAsync = async () => {
-  await new Promise<void>((resolve) => resolve())
-}
+export const noopAsync = async () => await Promise.resolve()
 
 export class CausedError<T> extends Error {
   cause: string

src/vue/FlakeView.vue

@@ -130,7 +130,7 @@ watchEffect(async () => {
 })
 
 const height = computed(() => {
-  return 2 // Slightly larger than border size
+  return 2 // Slightly larger than the border size
     + nameSize.height.value
     + contentHeight.value
     + footerSize.height.value

src/vue/FlakepileView.vue

@@ -8,6 +8,7 @@ import type { FileRef, PileActions, PileRef } from '@/app'
 import { ObIcon, ObSearch } from '@/components'
 import { useCssIf, useCssWith } from '@/utils'
 import { searchFlakes, sortFlakes } from './flake-filters'
+import type { MasonryOptions } from './masonry-common'
 
 import MenuButton from './MenuButton.vue'
 import MasonryUnified from './MasonryUnified.vue'
@@ -77,6 +78,18 @@ const scrollY = computed(() => {
   return canvasBounding.top.value - masonryBounding.top.value
 })
 
+const masonryOptions = computed<MasonryOptions>(() => {
+  return {
+    width: pile.value.width,
+    elasticWidth: pile.value.elasticWidth,
+    enableMaxHeight: pile.value.enableMaxHeight,
+    maxHeight: pile.value.maxHeight,
+    elasticHeight: pile.value.elasticHeight,
+    canvasWidth: canvasSize.width.value,
+    canvasHeight: canvasSize.height.value,
+  }
+})
+
 type MenuState = 'shrink' | 'normal' | 'expand'
 
 const menuState = ref<MenuState>('normal')
@@ -263,7 +276,7 @@ const cssNoLabel = useCssIf(isViewportSmall, '-nolabel')
             <MenuButton ref="el-size-options-button"
               class="fp-btn-icon-label"
               icon="scaling"
-              label="Size Options"
+              label="Size options"
               @click="showSizeOptions = !showSizeOptions" />
           </template>
         </div>
@@ -283,15 +296,7 @@ const cssNoLabel = useCssIf(isViewportSmall, '-nolabel')
           :flow="adaptiveFlow"
           :scroll-x="scrollX"
           :scroll-y="scrollY"
-          :options="{
-            width: pile.width,
-            elasticWidth: pile.elasticWidth,
-            enableMaxHeight: pile.enableMaxHeight,
-            maxHeight: pile.maxHeight,
-            elasticHeight: pile.elasticHeight,
-            canvasWidth: canvasSize.width.value,
-            canvasHeight: canvasSize.height.value,
-          }" />
+          :options="masonryOptions" />
       </div>
     </div>
   </div>

src/vue/MasonryUnified.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref, shallowRef, useTemplateRef, watch, type StyleValue } from 'vue'
+import { computed, inject, nextTick, reactive, ref, shallowRef, useTemplateRef, watch, type StyleValue } from 'vue'
 import { until, useThrottleFn } from '@vueuse/core'
 import type { EditingRef, Flake, PileAdaptiveFlow } from '@/data'
 import { PAD_Y, type MasonryOptions, type ResolvedMasonry, type ResolvedRect, type ResolvedMasonrySize, getUnsetWidth as getFlakeWidth } from './masonry-common'
@@ -22,7 +22,6 @@ const props = withDefaults(defineProps<{
 })
 
 const masonryRef = useTemplateRef('el-masonry')
-// const flakeIds = computed(() => new Set(props.flakes.map((f) => f.id)))
 
 const editing = inject('editing') as EditingRef
 const editingHeightCache = ref<number>(0)
@@ -32,8 +31,13 @@ const onEditBegin = (id: string) => {
   editingHeightCache.value = 0
 }
 
+const lastEdited = ref<string | null>(null)
+
 const onEditFinish = () => {
+  lastEdited.value = editing.value
   editing.value = null
+
+  resolveMasonryThrottled()
 }
 
 const heightMap = reactive<Map<string, number>>(new Map())
@@ -200,6 +204,16 @@ const resolveMasonry = () => {
     )
     updateStyles(styles)
   }
+
+  tryScrollToLastEdited()
+}
+
+const tryScrollToLastEdited = async () => {
+  if (!lastEdited.value) return
+
+  await nextTick()
+  requestScroll(lastEdited.value)
+  lastEdited.value = null
 }
 
 const resolveMasonryThrottled = useThrottleFn(resolveMasonry, 10, true)
@@ -217,6 +231,7 @@ watch(() => props.id, () => {
 
 watch([
   () => props.flow,
+  () => props.flakes,
   () => props.options,
   heightMap,
 ], () => {