toeverything / blocksuite Goto Github PK

We are mainly working on features for AFFiNE Alpha and data persistence.

• #159
• #160
• #158
• Support embed image block
• Support inline popover menu (quick bar)
• Support code block
• Support workspace version

Inline code style should be rendered using monospace fonts. It seems that we have a regression:

cc @QiShaoXuan

efer to：
https://github.com/penpot/penpot

Space should be the concept to model subdocuments equivalent. In a BlockSuite based regular apps, user should also able to declare multi static spaces. However for a directory tree in Affine live demo, each page itself would be a space, this requires spaces to be dynamically created with different ids.

Static usage:

// a space for todo list
store.createSpace('todo')

// a space for dashboard
store.createSpace('dashboard')

// corresponding YDoc structure
{
  "todo": { /* ... */ }, // blocks inside
  "dashboard": { /* ... */ }, // blocks inside
}

And a possible space structure supporting adding dynamic pages for Affine workspace:

{
  // a standalone space for directory tree
  "space:directory": {
    "page-0": { /* ... */ },
    "page-1": { /* ... */ },
  },
  "space:page-0": {
    "id-0": // ...
    "id-1": // ...
  },
  "space:page-1": {
    "id-2": // ...
    "id-2": // ...
  },
  "sys:index": {
    // ...
  }
}

Each space could be a YMap for now, and migrate smoothly to Subdocuments afterwards. In both cases their structure should be compatible.

Potentially an issue isolated to Apple M-series chips.

Error on M1 (Pro).

The source code can see at

But simply removing it is not work, so we need a standard util function to save and update the selection.

For more detailed see #229

also related to #231

For matching live demo features in data persistence, adding IndexedDB provider support is needed. This may require corresponding example playground entry, with basic test case to verify it works (e.g., make sure data exists after refresh, and could be manually cleared in console).

This example page could be another suitable entry for local debugging.

Some test cases are known to be flaky, e.g. the basic indent and unindent test case can be flaky locally.

Mermaid

Mermaid is a tool for defining and rendering diagrams. It will level up the end user ability to document their projects and personal notes

Official page

Mermaid repository

Ideas for solution

Since Mermaid is made with JavaScript if could be easy to embed in the existing code base. It should be easy to adopt. Found this article with a client-side setup https://css-tricks.com/making-mermaid-diagrams-in-markdown/

what types of users can benefit from using your proposed feature

No response

Additional context

No response

When publishing new packages without using changeset CLI, release logs of old versions weirdly exist in the new release log.

@lawvs any ideas?

In a fresh Vite project, installing BlockSuite with pnpm add failed. Log:

test-app git:(main) pnpm add @blocksuite/store @blocksuite/blocks @blocksuite/editor
Packages: +90
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
node_modules/.pnpm/[email protected]/node_modules/leveldown: Running instanode_modules/.pnpm/[email protected]/node_modules/leveldown: Running install script, failed in 764msused 98, downloaded 8, added 90, done
.../node_modules/leveldown install$ node-gyp-build
│ node:events:491
│       throw er; // Unhandled 'error' event
│       ^
│ Error: spawn node-gyp ENOENT
│     at Process.ChildProcess._handle.onexit (node:internal/child_proc
│     at onErrorNT (node:internal/child_process:478:16)
│     at processTicksAndRejections (node:internal/process/task_queues:
│ Emitted 'error' event on ChildProcess instance at:
│     at Process.ChildProcess._handle.onexit (node:internal/child_proc
│     at onErrorNT (node:internal/child_process:478:16)
│     at processTicksAndRejections (node:internal/process/task_queues:
│   errno: -2,
│   code: 'ENOENT',
│   syscall: 'spawn node-gyp',
│   path: 'node-gyp',
│   spawnargs: [ 'rebuild' ]
│ }
└─ Failed in 764ms

Workaround: pnpm i --no-optional

This should be a dependency issue originating from #220.

We didn't enforce the best practice to always add super call in lifecycles of Lit components yet. This may lead to subtle bugs and should be fixed.

Another points to decide:

1. Whether the super call should always happen at the start of the overridden method? Doing this seems to break some test cases
2. Whether should we add the override and protected prefix (and : void suffix) in all Lit lifecycle callbacks?
3. Whether should we use private _foo instead of private foo, in terms of variable names and method names?

The idGenerator callback config for Store looks over-engineering. It's hard to imagine why another new ID generator (and a new customized algorithm) would be needed. A config to switch between auto-increment mode (this is a debug-only config) and UUIDv4 should be adequate.

After the first line is selected, press backspace, and then enter a character will appear strange.

In the current version, blocks will be stacked together.

P.S. This is two groups

The expected behavior is to arrange neatly, for example.

To store binary resources (images, files, videos, etc.) that should not go into YDoc, we need to put them locally in-browser, via IndexedDB possibly. And in YDoc, we can use some kinds of id to map them.

A rough design would be needed to set up the principles and form the basic API surface.

1~3 main use cases of the proposed feature

Sometimes I may want to have inclusive or exclusive selection of strokes in whiteboard mode. "Inclusive" means a stroke is selected as long as any part of it is in the selected area, and "exclusive" means a stroke is selected only when the whole of it is within the selected area.
Introduce these four kinds of selections:

• Inclusive rect (already implemented);
• Exclusive rect;
• Inclusive lasso;
• Exclusive lasso.

Ideas for solution

No response

what types of users can benefit from using your proposed feature

No response

Additional context

No response

The dots before the first line of the list are not copied and are not deleted together when deleted

Support complex nested data structure in collaborative block.
Only top level primitives are supported for now

Otherwise, we need to create lots of nested block in some cases. It's not necessary.

1~3 main use cases of the proposed feature

1.Add mention component, such as @Someone,it can used in docs
2.Add table component
3.Support for document nesting and referencing
4.Support for document space, as well as document permission management

Ideas for solution

No response

what types of users can benefit from using your proposed feature

No response

Additional context

No response

Following error are randomly thrown in playwright console:

Unexpected console error: TypeError: Cannot read properties of undefined (reading 'id')
    at Store.removeSpace (http://localhost:5173/@fs/Users/ewind/code/blocksuite/packages/store/src/store.ts?t=1670451298738:26:30)
    at http://localhost:5173/@fs/Users/ewind/code/blocksuite/packages/store/src/workspace/workspace.ts?t=1670866875269:158:19
    at http://localhost:5173/@fs/Users/ewind/code/blocksuite/packages/store/src/utils/signal.ts:86:9
    at Array.forEach (<anonymous>)
    at Signal.emit (http://localhost:5173/@fs/Users/ewind/code/blocksuite/packages/store/src/utils/signal.ts:84:20)
    at http://localhost:5173/@fs/Users/ewind/code/blocksuite/packages/store/src/workspace/workspace.ts?t=1670866875269:26:28
    at Set.forEach (<anonymous>)
    at WorkspaceMeta._handlePageEvent (http://localhost:5173/@fs/Users/ewind/code/blocksuite/packages/store/src/workspace/workspace.ts?t=1670866875269:23:18)
    at callAll (http://localhost:5173/node_modules/.vite/deps/chunk-LZSYNGME.js?v=6985b3fb:748:12)
    at callEventHandlerListeners (http://localhost:5173/node_modules/.vite/deps/chunk-LZSYNGME.js?v=6985b3fb:1898:63)

This fails e0e6e12 and this check has to be disabled temporally.

To reproduce, mark the test case 'basic multi user state' (or any test case that requires pageA and pageB) as test.only, then run pnpm test -- basic.spec.ts --repeat-each=10. But this still happens occasionally.

Part of #216

All the code path with TODO use schema comments in the store package should be refactored.

When I try to use "pnpm dev" command in windows system, it throws the following error

I did a quick search and it seems that this is introduced by #209 @thorseraq

This doesn't affect usability, so it's tolerable and doesn't have top priority for now.

This may be related to issue#196, and the behavior of re-editing after selecting text is not as expected. I need to delete it write new instead of adding after these texts.

• Support other shapes (triangle, circle, line...)
• Support other colors
• Resize on edges
• Hitbox improvement(should be easier to be selected)
• #374

• Data Table Edit and View
• Collaborative App
• Different Column Type: Text, Select,Number, Checkbox and etc
• Basic sort
• Multi Views: KanbanView, TableView, CardView, etc
• Group Data
• Filter
• Sorter
• Row Add/Delete
• Column Add/Delete
• Basic Selection Interactive Behavior
• Basic Keyboard Interactive Behavior
• UI depends on figment

The pnpm test:unit command throws the Yjs was already imported issue:

➜  blocksuite git:(master) pnpm test:unit

> blocksuite@ test:unit /Users/ewind/code/blocksuite
> vitest --run


 RUN  v0.23.4 /Users/ewind/code/blocksuite

stderr | unknown test
Yjs was already imported. This breaks constructor checks and will lead to issues! - https://github.com/yjs/yjs/issues/438

 ✓ packages/store/src/__tests__/jsx.spec.ts (3)
 ✓ packages/store/src/__tests__/space.spec.ts (15)

Test Files  2 passed (2)
     Tests  18 passed (18)
  Start at  08:44:04
  Duration  670ms (transform 321ms, setup 0ms, collect 185ms, tests 29ms)

We can migrate ClipboardManager to BlockHost.clipboard. This solves the problem of calling clipboard APIs from the blocks package and aligns more with our goal to build more editor modes as "block container" in @blocksuite/blocks. Ultimately the @blocksuite/editor package will be mainly a thin wrapper of different block containers (default page block, edgeless page block, mobile page block, etc.).

Also, this resolves the OpenBlockInfo conflicts.

It's a nice-to-have improvement. We can wait until the next housekeeping cleanup after our December release if we have a decent workaround.

cc @DiamondThree @zuoxiaodong0815

1~3 main use cases of the proposed improvement

(On Windows 10)

Like Miro or Heptabase, the “board mode” is a canvas spreaded of multiple objects. Hence, the accessibility and operability of the canvas and the objects are vital.

There are some points can be improved:

1. The zoom speed & magnitude with scroll, now is too fast. Even if my original canvas size is 500%, when I once zoom out(-), it will jump to 10% immediately. It's out of control.

2. hold and drag with the right mouse button to drag the canvas.

3. the little map down the right corner can be closed.

4. Simply copy and paste the blocks rather than synchronize it (for now, if I copy and paste an object, it will be a synchronized copy. But in a general way, it shouldn't be synchronized.)

5. The objects can be duplicated quickly by alt+drag.

6. The objects can be aligned and snapped.

7. The spacing between the objects can be equally distributed.

8. The objects can be set up or down of the layer when they are overlapped.

Ideas for solution

No response

what types of users can benefit from using your proposed improvement

everyone

Additional context

No response

I try to do real time collaboration in blocksuite. When I join the workspace, I press enter on the first line and a weird block appears. I think this is a bug and hopefully someone can fix it.

example: localhost:5786/?init=base64

The rectangle position of the selection is wrong when the page is not at the top

Reproduction:

1. press BACKSPACE at an empty block
2. type any character

Recording

Store

• Support BlockModel and YBlock entities
• Support WebRTC-based debug provider
• Support slot-based events
• Support block-wise undo/redo
• Support cursor and awareness adapter
• Support API for updating nested data structure
• Support IndexedDB provider
• Support importing workspace (as YDoc binary)
• Support exporting workspace (as YDoc binary)
• Support defineModel schema API

Blocks

Page

• Support model class and basic rendering
• Support adding block model to store on init
• Support page title

Text

• Support rich text component
• Support bold, italic, underline, strikethrough format
• Support cursor on pressing arrow key up/down
• Support switching between types
• Support link
• Support adding block on enter (cursor at line end)
• Support splitting text block on enter (cursor at the middle of a line)
• Support recognizing common markdown syntax
  • # headers
  • * numbered list
  • 1. bulleded list
  • [] to-do list
  • **text** bold
  • ~text~ underline
  • ~~text~~ strikethrough
  • ***text*** bold and italic
• Support hotkeys
  • enter (hard enter)
  • shift + enter (soft enter)
  • cmd/ctrl + A (select all)
  • cmd/ctrl + B (bold)
  • cmd/ctrl + I (italics)
  • cmd/ctrl + U (underline)
  • cmd/ctrl + shift + S (strikethrough)
  • cmd/ctrl + K (link)
  • cmd/ctrl + E (inline code)
  • tab (indent)
  • shift + tab (un-indent)
  • cmd/ctrl + option/shift + 0~9 (headers and paragraph)
  • cmd/ctrl + + (whiteboard)
  • cmd/ctrl + - (whiteboard)
  • shift + ←/→
  • shift + ↑/↓

List

• Support basic rendering
• Support indent and unindent
• Support adding or splitting siblings on enter
• Support range delte
• Support switching between numbered, bulleted and to-do style

Image

• Support basic rendering
• Support drag and drop

Editor

• Support exporting to markdown
• Support importing (pasting) from markdown
• Support rich-text content copying and pasting
• Support React container

Paper mode container

• Support rendering paper mode selection box
• Support hit test on basic text blocks
• Support hit test on nested blocks
• Support UI styling
• Support dark mode

Endless mode container

• Support panning and zooming container
• Support rendering endless mode selection box
• Support drawing basic shape

Playground and test suite

• Support E2E test suite and CI
• Support multiplayer state asserting
• Support text selection and store assertion
• Support keyboard assertion
• Support selection box assertion
• Support building and package publishing automation

1~3 main use cases of the proposed feature

As a student, I want to be able to take notes and use AFFiNE as a whiteboard + note taking solution. Being able to include mathematics would be great!
Also, I can imagine teachers using this for lessson plans, etc.

Ideas for solution

Implementing a latex editor, a la Zettlr (after typing latex in $ signs, Zettlr automatically renders it using a LaTeX web renderer), or using a visual math editor like MathLive, if could add a math button to the editor or by typing /math it inserts a MathLive editor (https://cortexjs.io/mathlive/), and when users navigate away from that input box, it will automatically render using a service like KaTeX (katex.org) or Mathjax (mathjax.org).

what types of users can benefit from using your proposed feature

students, anyone that needs to insert math

Additional context

No response

Warning message thrown from pnpm test:

Element embed-block scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.

@DiamondThree any ideas?

Two issues:

1. Select multiple blocks and drop the cursor at the end of line end. An error was threw out.
2. No need to delete firstRichText in container-operations.ts - deleteModels when the selected text in firstRicthText is empty.

Recording:

The cursor cannot be edited if it is slightly off

After selecting multiple lines, editing only modifies the first line

Currently, the README only includes high-level concepts of BlockSuite. In the upcoming 0.3.0 release, developers should be able to reuse BlockSuite, so the documentation should cover the basics for a quick start using BlockSuite in third-party projects.

This should benefit AFFiNE and DevClient both.

AFFINE uses blocksuite as the EditorProvider. When reading the code of AFFINE (of the pathfinder branch), I met a question that when window dispatches an event, (the Capture phrase is disabled by default) this event bubbles up from the "window" element, which element will receive this event? (window seems don't have any parent element) .

I referred Bubbling and capturing explained.

In the bubbling phase, the exact opposite of the capturing phase occurs:
The browser checks to see if the direct parent of the clicked element has a click event handler registered on it for the bubbling phase, and runs it if so.
Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the element.

It would be useful to reuse the blocks in React, so bindings to demonstrate how to do this would be appreciated. Since currently the playground has React support, adding new example entries wouldn't require much effort.

Inspired by the conversations in #206.

Design a JSX interface that allows us to create JSX code that looks near identical to the snapshot strings we get for jest snapshot.

See related: Test: jsx snapshot parse text format #154

In debug-menu, some icons adjusted by div wrapper were missing.

Description:
At first, I pressed cmd + a to select all the text and pressed BackSpace to delete all of them. Then the next input would be triggered twice. And the extra char seems can not be deleted.

Recording:

Then I tried commenting the code in next pic, and it worked...