dashibase / lotion Goto Github PK

View Code? Open in Web Editor NEW

2.8K 23.0 131.0 1.67 MB

An open-source Notion UI built with Vue 3

License: GNU General Public License v3.0

HTML 0.49% JavaScript 1.47% Vue 56.14% CSS 1.19% TypeScript 40.72%

editorjs notion markdown vue hacktoberfest

lotion's Introduction

lotion's People

Contributors

Stargazers

Watchers

Forkers

nian88 taisho rtcoms fengweijp parkerproject ivteplo metanite ivorpad shanksgx mert-coderoid willnguyen1312 toybz holazz leonardssh niyorn zmilan sinh117801 e3d bo7owers joypal23jkp curlydoodle changtraixuqang97 bbarni2020 suryatmodulus imsathiya17 uakbr nomiscientist noor-tg gurpreet-singh121 guilherme101k sixdjango vvidday iwanhae productinfo basd1995 quorafind mu-l lyrl doomconquer kkkzoz allanw msoftware huynl-96 shunjun water2thewave forkmeat cnfulishe mortjac exposir 18722650553 htmlcssdirectory landlordlycat xxyet yrestom uiforks alobe mgambill perjerz shugangyao1 only4mdb botmaster javierwhj arabeseque zhangenming iuzn 0xdebabrata thebspin gshuster johnpuddephatt christireynolds sincely fairhopeweb lessons-learned vueleague grvpanchal knoxnoe jevoudrai rbanyufirdaus dineshgadge shashankbhatgs mysteryven cuddlesz melodyjerry onexdata alemoreau personsg hyun-hyang xstarlink oomrcookieoo williamaguiar ppalonebot lyytaw coolachu yutakanna blessing-gao mying01 bcartier lrochetta eramax gravitano

lotion's Issues

Can't select text for more than 1 line

few bugs found

can't select text for more than 1 line
if you delete some word in the middle of a sentence until it deletes the sentence in the line above, when you do a cmd+z (control+z) the undo gets lost

Convert to component library

Hi! I just saw your work and it is very impressive and minimal 💯

How do you think if we refactor some parts of the core to publish as a component library to npm? It could be a really nice minimal editor component.

Last character is deleted when turning text block into heading block

To reproduce:

Click on menu for a text block
Click on any heading
Last character is deleted

This does not happen if menu is opened using a slash shortcut.

Problem with the input history.

ctrl+z and ctrl+y has not a normal or notion-like behavior.

Maybe don't use the browser behavior for ctrl+z and ctrl+y and add a history for the data tree?

Thanks for your awesome job, and please, keep it simple :)

Drag & drop on block line is a problem

When I want to select a text, sometimes I drag & drop it instead (on desktop and everytime on mobile).

Notion does not use drag & drop directly on the lines, the button for that is a good option.

It fixes another problem where clicking has no effect when you click between blocks lines.

Carret is always put at the end of text after transforming block using slash syntax

To reproduce:

Convert block to any other type of content block using slash syntax
Caret will be put at the end of text even if slash was somewhere in the middle

Probably the reason for this:
Lotion.vue::setBlockType() calls moveToEnd() even if transformation was invoked with slash syntax. There is a call before that in Block.vue::clearSearch() to set carret at right position.

Will there be ToDo and forms in the future

I like this repo.
Will there be Todo and Table functions in the future?

Getting error when moving the block in Chrome

I got the following error when I moved the block in Google Chrome.
But I ensured this error didn't occur in FireFox.

error in console

Uncaught (in promise) Error: this.element.parentElement was null
    at i (general.js:205:1412264)
    at L.dao (general.js:2283:41095)
    at L.destruct (general.js:2283:21747)
    at general.js:2283:21664
    at MutationObserver.observe.childList (general.js:205:1406674)

Error occurs when transforming heading into text

Step:

Add slash at the end of the text
Turn this block into heading
Add slash at the end of the text
Turn this block into text
Error occurs

Prop mutation

Currently blocks are mutating props directly, e.g:

lotion/src/components/blocks/HeadingBlock.vue

Line 4 in b1a3ade

@blur="props.block.details.value=content?.innerText"

My understanding is that props are readonly and shouldn't be mutated, instead an event should be emitted back up to the parent, which should then reassign the new value at the top level (which then cascades back down to the component). This is Evan You's advice and it came up on Twitter in response to the announcement.

I'm happy to submit a PR showing this in practice if it's helpful but wanted to first ask in case there was something I'm missing.

(amazing work by the way, I'm really excited about Lotion's potential!)

Merging empty heading block into another causes unexpected behaviour

merging an empty heading block into another results in "undefined" being added to the block being merged into.

video

Add issue & PR templates to GitHub repository

Seeing how Dashibase is getting many issue report & PRs, it will be great to include som templates so there's a standard for new contributors to follow when creating an issue for bugs/ feature requests, and when they create PRs for them.

Examples of GitHub templates can be found here and here

Remove html tag and use a transformers

Having html tags here is not good:

This data should be in a format that can be stored in a database.
And as a developer, I don't want store html tags inside my database, only markdown or cleaned data.

Instead of:

{
    type: "TEXT",
    details: {
      value: '<p>5. <strong>Bold</strong> and <em>italicize</em> using markdown e.g. *italic* or **bold**</p>'
    },
  }

I want provide:

{
    "type": "TEXT",
    "details": {
      "value": "5. **Bold** and *italicize* using markdown e.g. *italic* or **bold**"
    }
}

And transform it if needed for the editor.

Support columns grid

Is your feature request related to a problem? Please describe.
I really love this project and I would like to request column drag-and-drop feature. So that we can leverage grid layout for more flexible editing

Describe the solution you'd like
Drag and drop a component to the side of another components to create columns

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

Deleting all blocks leaves the editor in a state where new blocks can't be added

I was playing around with the demo at https://lotion.dashibase.com/ and noticed that if I delete all the blocks (I started at the bottom and moved upwards, leaving just the main heading remaining), I get into a state where I can't seem to add any new blocks. At this point, I don't see a tooltip to add a new block and the '/' shortcut doesn't popup the menu to convert a block to a particular type.

It rubs the lotion

It clones the lotion on its workspace. It does this whenever it is time to edit.

It forks the lotion on its repo or else it gets no free stuff again.

Now it gives the lotion a star and puts lotion in a basket.

Anyone else have lotion jokes?
Leave it here.

Heading block bugs with browser inconsistencies

Original bug outlined in #30, where converting from a heading block to text block breaks the entire block. This bug only occurs in chromium browsers.

blur

Firefox (correct behaviour):

Chrome (bug):

The above was fixed by #31 by changing the state update on heading blocks from a blur event to input. However this introduced a separate bug on firefox & safari where typing within a heading block always inserted characters at the beginning of the line. (rolled back in 3a463c6)

input

Firefox (bug):

Chrome (correct behaviour):

Summary:

	Chrome	Firefox/Safari
input	Correct	Buggy (cursor)
blur	Buggy (conversion)	Correct

Set block's unique id for comment and history

Hi,
Thanks for your great open-source project 😍.
I have a challenge with this editor, maybe you can help me.

I want to set and save the block's unique id in DB for some features like comments or the block's history. Do you have any idea about that? Notice that text or structure changes shouldn't change id.

Thanks.

Component search improvements

Typing /heading shows two variants: Heading 1 and Heading 2.

However, typing /h1 to quickly access Heading 1 doesn't work. The same is for /h2.

Additionally, if I insert spaces, just like /heading 1, the search ignores the space, tries to look for heading1, and says that nothing was found. And backspacing three times after that leaves /headi in the search box instead of /headin.

gpt-3 addon

Can you implement AI features to this clone?

Nuxt 3 style error

Describe the bug
I try to use Nuxt 3 but it is not totally rendered

To Reproduce
Steps to reproduce the behavior:

Follow
Copy the example

<template>
  <Lotion :page="page" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { Lotion, registerBlock } from '@dashibase/lotion'

const page = ref({
  name: '🧴 Lotion',
  blocks:[{
    id: uuidv4(),
    type: 'TEXT',
    details: {
      value: 'Hello, World!'
    },
  }],
})
</script>

Paste to pages/index.vue
See error

Expected behavior
A beautifully rendered Lotion editor

Screenshots

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

Quickly press enter key output html code

Caret moves down when trying to add multiple blocks

Description

In Notion, when you click on the "+" button next to the block, you will see a context menu to choose the custom block that you want to add to your document, so there isn't a behavior of repeatedly clicking on the "+" button.

However, in Lotion, right now, when we click on the "+" button repeatedly, the caret is immediately moved to the new block. This results the user to leave where they are previously. While this logic does seem to follow how Notion implements it, it is not ideal for users that just want to add multiple placeholder blocks.

Screenshots

Slash is not deleted when converting blocks

Steps to reproduce:

Add slash in text
Select to convert to any content block
Slash character is not deleted

First time entering '/' in a block shouldn't actually insert a /

If you start a new block, and open up the 'turn into' menu by pressing '/', it could be nice if that didn't actually insert a / into the block. This could also apply if the block is empty (e.g. the user has typed some test and then deleted it).

Handling / menu suggestion

Stuff looks promising. Nicely thought out UI!

One suggestion though, when you trigger the menu using /, typing hea and selecting heading 2 will put characters /hea into the editor, then you need to delete those after converting to a header. It might make sense to remove the characters automatically if you activated an option in the menu.

Also, it would be cool to have an option to move blocks up/down using (the same?) menu, so you don't need to use the mouse to edit at all.

Block menu and keyboard shortcuts

Lotion recognizes keyboard shortcuts as if Ctrl or Alt weren't pressed. For instance, if a user presses Ctrl+Z, then a letter z will be added to the search term, while in the editor the shortcut will work as it should (it will undo the last action).

Preventing a letter from being added when a user presses a shortcut is quite simple to do (just extra check for Ctrl and Alt keys). But I currently have no idea how to fix the difference between input and search term that is produced when a user presses Ctrl+Z or Ctrl+Backspace.

Arrow key navigation doesn't work if italic bold text is at front/back of block
Merge doesn't work if italic bold text is at the front of the block that is being merged
Split doesn't work if initiated from within the italic bold text
Conversion via search doesn't delete search term if initiated from within italic bold text

Issues are mainly due to the tags being nested, since most functions currently only work for one layer of nested tags

Video

Fix would require a decent amount of refactoring to support nested tags

dashibase / lotion Goto Github PK

lotion's Introduction

Dashibase

Features

Supported

In-progress

Backlog

Getting Started

Like what you're seeing?