Vue Contenteditable Form
Prototype: A Notion-like Form written in Vue 3, Vite, and TailwindCSS
Demo
Installation
Use the package manager npm to install Vue Contenteditable Form.
npm install
Alternatively, use the package manager yarn to install Vue Contenteditable Form.
yarn install
Usage
Use the dev
command to run Vue Contenteditable Form locally.
npm run dev
# or
yarn dev
The script tells you on which port the website is available.
Testing
The test files are in src
, right next to the tested components. Spec files are named as the component with the suffix spec
: *.spec.js
.
Run the following command to open the Component Test Runner:
npm run test
Deployment
The main branch of this repository is automatically deployed on Vercel.
To build the project, run
npm run build
# or
yarn build
To serve the project, run
npm run serve
# or
yarn serve
Project Roadmap
This project is currently in a prototype state. You can check out the project board on GitHub.
Currently implemented and planned features are:
- Add end edit contenteditable blocks
- Store to LocalStorage
- Add Button for new blocks
- Make block tags changeable with rich text buttons
- Add images
- Resize images
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests and documentation as appropriate.
fix: #5
fix: #5 delete block with 'backspace' and the caret is on the first position.
concat previous block and deleted block
updateBlock does not rerender the new content, so I introduced a
.version
for each block that is the:key
for vue rendering. and on changing thatversion
causes a rerendering => we see the new content in the browser.but unfortunately than there is an error in the vue-contenteditable npm package.
That delete-feature is working but that error in dev-tools isn't good. Do you have an idea?
Use / to add a title
Story
As a user, I want to be able to turn a field into a title.
Description
When starting a block with
/
a popover opens. This popover shows the option "title". When the user selectstitle
, the HTML block should be converted from a<p>
to an<h2>
. The design is open for imagination, something less big than the<h1>
of the page title.Details
For now, this only needs to work when the block itself is still empty. Tally.so creates a new block below when using the / shorthand in a block with content.
Next Steps
<h3>
Copy + Paste on a block should duplicate it
Story
As a user, I want to duplicate a block by clicking Cmd C + Cmd V (macos Example. Should work for all OSs)
Acceptance Criteria
copy-paste #16
copy-paste works, but the "normal text-copy-paste" does not :-(
to copy a block no text should be selected.
getting data from the clipboard needs permissions from the browser - so the first time a dialog appears.
feat: add image block
fix svg-attributes on svg icons add image block on + with file picker
sorry, I don't know what second point on acceptance-criteria means (It displays the options "Image")
currently there is no special image centering of size limitation. do we need one ?
saving works without any changes - well done: JSON.stringify :-)
feat: focusses blocks before or after when using key up and down (clo…
…ses #13)
This is not a perfect solution yet, but it works. Vue prints the warning
runtime-core.esm-bundler.js:38 [Vue warn]: Invalid event arguments: event validation failed for event "update:modelValue".
for empty blocks. I think it's unrelated to the cursor up/down (happens when clicking enter as well), so I want to fix that in another PRblocks should be deletable
Ideas:
I see two ways of deleting a block:
Backspace
on an empty the blocktally.so does deleting the current block on pressing
Backspace
if the cursor in at the start of the block. Then the block is deleted and - if there was any text right of the cursor - the deleted text will be contacted to the block before the current block.may be we start with
Backspace
on an empty block.cursor up/down not working on images
I see two solutions:
Add Images via "+" button
Story
As a user, I want to be able to add images to my form by clicking on a "plus button" which opens my file browser.
Acceptance Critieras
tag)
Next Steps
cursor down on empty text block should jump to next block if there is any
Bug & History
Focusing next block doesn't work when current block is an empty string. This behavior was implemented to prevent using cursor down-down-down to create a lot of useless empty blocks.
Expected Behavior
When a text block is empty but there is a next block, it doesn't focus this next block.
Actual Behavior
When a text block is empty but there is a next block, it doesn't focus this next block.
https://user-images.githubusercontent.com/5849721/131220230-c3b94c1b-3060-49cc-a3e0-ea0bbb50075b.mov
feature: adds delete action with bin icon next to text block
@ReneCode
This PR adds the bin icon next to an HTML block to delete it from the
blocks
. I couldn't find out how to add you as a reviewer, I try to find out if I can add you as a collaborator to the project or something like thatWIP: feat: #31 improve paste
pasting a copied block into an empty block will not create a new block, but exchanges that empty block.
will fix #31
unfortunately sometimes there are errors in the dev-console on vue-contenteditable
Proposal: Pasting in same line when empty
Hi @ReneCode,
I wondered if it UX is improved by pasting a block (not plain text) in the focused block when it is empty instead of adding a new block. What do you think?
https://user-images.githubusercontent.com/5849721/132973620-7544ad8d-df4c-4bce-91d1-d3e0a4b91f10.mov
add testing
To ensure current feature will not be acidentlly broken by new featues, I see the need of some automated testing.
These tests have to be on a level of "user-input", so they are not unit-tests but more e2e tests.
Images should be resizeable
Story
As a user, I want to be able to resize images because full width might be too large.
Acceptance Criteria
Bold + Italic actions on text selection
Story
As a user, I want to be able to make select text and turn it into bold, italic, stike-through and code-formatted text.
History
As of now, there is a toolbar displayed above text selections. It shows buttons to turn the text bold and/or italic. When activating a button, the code simply surrounds the text selection with a
<strong>
or<em>
HTML tag.The problems with that are:
I am a text <strong>with a bold text</strong> yippieh.
Now think of selection "bold text yippieh"to turn "yippieh" bold as well. This won't work, as the HTML would beI am a text <strong>with a <strong>bold text</strong> yippieh</strong>.
Possible Solution
Tokenizer?
Resetting doesn't update title
Bug Report
Resetting doesn't update title
Expected Behavior
When clicking on "reset", the page title is reset.
Actual Behavior
When clicking on "reset", the page title is not reset.
Steps to reproduce
Recording
https://user-images.githubusercontent.com/5849721/128304857-8431bb89-8805-403d-9781-3226dbdd7d36.mov