Git Product home page Git Product logo

craft's Introduction

An open-source Notion-style WYSIWYG editor with AI extensions support.

Introduction · Installation · Setting Up Locally · Tech Stack · Contributing · Fork · Roadmap · License


Introduction

Craft Editor is a Notion-style WYSIWYG editor with AI extensions support.


Installation

To use Craft Editor in a project, you can run the following command to install the @sergeysova/craft NPM package:

npm add @sergeysova/craft

Then, you can use it in your code like this:

import { useState } from "react";
import { CraftEditor, JSONContent } from "@sergeysova/craft";

export default function App() {
  const [content, setContent] = useState<JSONContent>({})

  return <CraftEditor content={content} onUpdate={(editor) => setContent(editor.getJSON())} />;
}

Setting Up Locally

To set up CraftEditor locally, you'll need to clone the repository.

If you've deployed this to Vercel, you can also use vc env pull to pull the environment variables from your Vercel project.

To run the app locally, you can run the following commands:

pnpm i
pnpm build
pnpm dev

Tech Stack

CraftEditor is built on the following stack:

Contributing

Here's how you can contribute:

  • Open an issue if you believe you've encountered a bug.
  • Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Repo Activity

Craft Editor repo activity – generated by Axiom

Fork

This project is an enhanced version of Novel, originally created by Steven Tey. I am forked it to introduce additional customization options, all without the constraints of maintaining backward compatibility of Novel.

I am created @sergeysova/craft with the aim of offering a more modular and customizable editor experience. My changes include updating dependencies, streamlining the default editor content, and disabling certain features like the Image block and AI support. These features are not gone for good; rather, I am planning to reintroduce them as optional extensions, giving you the freedom to tailor the editor to your needs.

Roadmap

  • Documentation: To provide detailed guides and tutorials for extending functionalities, integrating with state managers, and utilizing AI capabilities.
  • Craft Editor Control: To seamlessly integrate with any state manager.
  • Modular AI Features: Move AI capabilities to an extension for optional use.
  • Image Uploading as an Extension: To give you the choice to include it or not.
  • Command Popup Customization: Allowing the installation of various block types.
  • Independence from Vercel: Making CraftEditor fully self-reliant for uploading, AI, analytics, and more.
  • Notion-like Menu: For each line, features for transforming, settings, deletion, etc., will be available.
  • i18n Support: To enable internationalization and localization for a more accessible and global user experience.

By making these changes, we aim to provide a more flexible and user-friendly editor that can be easily integrated into your existing tech stack.

License

Licensed under the Apache-2.0 license.

craft's People

Contributors

aidandaniel97 avatar colinricardo avatar dhairyathedev avatar dhravya avatar eyalcohen4 avatar graemefulton avatar hernancito avatar hitgo00 avatar jaril avatar lakbychance avatar momensherif avatar ohhoney1 avatar prathameshjchavan avatar rajatsandeepsen avatar redac avatar rowheat02 avatar sereneinserenade avatar sergeysova avatar simomay avatar smookeydev avatar steven-tey avatar umeshjain1999 avatar uncenter avatar vincent0426 avatar yash1744 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

craft's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.