toeverything / blocksuite

🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
https://blocksuite.io
Mozilla Public License 2.0
4.08k stars 352 forks source link

Inline partial formatting for text block #7453

Open oytuntez opened 4 days ago

oytuntez commented 4 days ago

Hi there,

Is it possible to apply partial formatting on a text element, such as making a word in the middle bold? This would basically have the same formatting options as mentioned in this issue.

I am currently using Note block to achieve this (and make the Note block look like a text block without paddings etc...).

donteatfriedrice commented 1 day ago

If you are using blocksuite for development, you can now experience this new element type, EdgelessText, in the playground. You can use the shortcut key T or select the text element on the toolbar to activate the new text tool.

oytuntez commented 1 day ago

Thank you @donteatfriedrice! I did pull the recent commits, exactly what I needed, great job!

image

👍 Most formatting options are available for inline as well 👍 Text still scales when the box is scaled, preserving the inline formatting

Some findings (pheew, this started with 2 items... fully based on my real-world experience):

donteatfriedrice commented 23 hours ago

Thank you @donteatfriedrice! I did pull the recent commits, exactly what I needed, great job!

image

👍 Most formatting options are available for inline as well 👍 Text still scales when the box is scaled, preserving the inline formatting

Some findings (pheew, this started with 2 items... fully based on my real-world experience):

  • Copying inline text from EdgelessText and pasting it on whiteboard creates a new Note block, rather than an EdgelessText block.
  • Font family is missing in inline formatting toolbar, font family can only be selected for EdgelessText box.
  • "Link" formatting tool doesn't auto focus on URL text input in the Link popup.
  • Minimum EdgelessText box becomes much higher than the actual text height when you resize the box:
image
  • Escape keyboard key does not cancel editing mode.
  • EdgelessText box formatting and inline formatting toolbars are very different. They can be unified. Box formatting toolbar is missing some formatting tools from inline formatting toolbar. Here is the comparison:

image image

  • Double-clicking the border of an EdgelessText should shrink the EdgelessText block to the actual text height and width.

Thank you for your feedback. We have recorded the issues you mentioned. Since this is a function just developed in the last iteration, it may take some time to improve. We plan to improve edgelessText in this iteration to give users a better experience.

Thanks again!