Blocks

[tangjeff0]

Tasks

#183 #221 #224 #209 #226

• tests for all this
• copy and paste
• ctrl-z
• context menu
• block selection
• text selection
• cmd+b bold
• cmd+i italics
• cmd+enter to cycle through TODOs
• [[]] and (()) creates auto-complete (get-caret)
• / creates slash commands menu (get-caret Slash commands #59 )
• backspace
• drag and drop Drag and Drop / Block Selection #241
• tab, shift-tab
• enter
• arrow-keys
• debounce

Original Post

Click to open

Related: #60

06-26-2020 Not much to say, just been doing hardcore study and engineering. Went really deep on datalog #183 and DOM fundamentals #158

06-16-2020 Resource I've been using for understanding DOM events (part 2): https://javascript.info/

Scopes for block writing:

1. block selection – user should only ever be able to edit one block at a given time
2. keybindings (Global Keybindings #64) – listed the core structural keybindings below
3. drag and drop – should show user where their drop will land to re-order block
4. text selection
   1. clicking on a block should drop the text cursor to the correct character
   2. markup keybindings, e.g. bold and unbold should keep the correct characters selected

06-11-2020 later

• read: refactor old pages/blocks to be usable by designers and others building off of pages (@shanberg @Bardia95). This is all done except for (un)linked references.
• write: lots to do here, will need to be a few PRs
  • keypress: going to implement a global lib for this, probably re-pressed
    • tab/shift-tab indent/unindent
    • up/down to move between blocks
    • enter creates a new block
    • backspace on an empty block deletes it
  • click
    • on block: turn into editable block. May need to ask @Bardia95 and @jelmerderonde what they recommend as best path forward here
    • out of block: write :block/string datom

06-11-2020: Early thoughts. There are a few different components that might use the base-level block component:

1. node page (where the page is a link), and its child blocks
2. block page (where the page is zoomed in on a block), and its child blocks
   • must show context (find parents)
3. block embed {{embed: ((uid))}} — simplest one I believe
4. (un)linked references
   • must show context for each reference (find parents)
   • does a groupBy :node/title
5. right sidebar, or how we can open/collapse pages as if they were blocks

So, thinking of combining #96 with #97. Still unsure of how these components will map to isolated scopes.

Node Page

Block Page

(Un)linked References

[shanberg]

Brief test/review

• Editing
  • Lose cursor position on indent/unindent while writing
  • Occasional appearance focus ring (when switching away from and back to Athens, then creating a new block?)
  • Parent block feels slow to expand height when I’m typing in a child’s textarea and the textarea size changes
• Indenting
  • Tab to indent indents the wrong block sometimes
    • Repro:
      • Write a block
      • Quickly press return (to create a new block below), then tab (to indent it)
      • Observe indent occurs on wrong block
  • Should unindenting move block to end of parent order, or split the tree at the same ordinal space?
    • End of order: logically simpler, but visually surprising/disorienting
    • Split the tree: visually easier to follow, less disorienting.
    • End of order makes it feel like the text is heavy and stiff
    • Splitting makes it feel like the text is light and pliable
  • Can I add a normal tab character?
• Selecting
  • If I try indenting a selection, should it always work, always work as much as it can, or only work if all can?
    • Maybe selection should work/feel more like Notion, where if a parent and all children are in the selection, selection events (and appearance) only apply to the parent
  • Can I select with a box?
  • Drag-select appears additive-only, but because of the minimal feedback associated with creating a drag-selection, I’m unlikely to make the correct selection the first time. I’m more likely to make a too-large selection, then undo and make a smaller selection.

[tangjeff0]

appearance focus ring

• what's this?

Should unindenting move block to end of parent order

• end of order is what Workflowy and Roam do, so that's why it's that right now.

Can I add a normal tab character?

• idk can we

If I try indenting a selection, should it always work, always work as much as it can, or only work if all can?

• Good question. Workflowy and Roam have this partial indent thing, where they only indent the left-most blocks. I don't know how I feel about it.

Can I select with a box?

• what box?

Drag-select appears additive-only.

• Should be able to make this flexible/redoable.

[shanberg]

@tangjeff0

Focus ring
Focus ring on right:

PR #282 might obsolete this issue.

Unindenting to edge
I think it’s worth thinking about sometime later down the road. Probably want to keep it as it is, but maaaaybe we could add some visual indication of what's moved where. Highlight the moved block for a second, maybe.

Tabs
Nerds can probably paste a tab character if they want. Maybe tabbing behaves differently in a prose writing mode, or something.
Also: Default to tabs instead of spaces for an 'accessible first' environment

Indenting Selections
I think this gets to the nature of tree selection. At the moment I think it’s weird that we allow selecting both a parent and its children as distinct selections. I think in those cases the selection should be rolled up to just the parent, and any/most actions performed on the parent should apply to the children as well. There may be cases where that's undesirable, but I think indentation is not one of those.

Drag-selection
Like in Notion. Dragging creates a box and anything block the box touches is added to the selection.

[tangjeff0]

Tabs

Nerds can probably paste a tab character if they want

😂 on a more serious note, we will want true tabbing in triple backtick codeblocks. There is probably a general solution to this.

Indenting Selections

Yup, working on this. I believe we can use goog.dom.findCommonAncestor to roll up selections into parents.

Drag-selection

I want that too, but not my personal priority. This is CSS heavy, so I encourage you take it on if you want to!

[alaq]

we will want true tabbing in triple backtick codeblocks. There is probably a general solution to this.

Roam uses CodeMirror for this. It's extremely versatile and extensible. That sounds like a good solution as well for us.

[tangjeff0]

Many small interactions for /, [[]], and (()) such as caret placement after expansion and cases in which dropdown closes/opens. Will probably want a similar checklist for these @shanberg .