npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bento-editor/core

v0.3.5

Published

Core for Bento Editor

Downloads

3,607

Readme

@bento-editor/core

Introduction

Bento is build on top of Slate. Bento's primary objective is to provide Notion-like editor using Slate APIs. For Bento having this aim, you'll find Bento similar to Slate and Notion regarding its terminology, function, etc.

To better understand Bento, we highly recommend you to read Slate's documents:

and try out Notion.

Terminology

Editor

  • is a root-level object of Bento.
  • is a block-styled editor: composition of block-level and inline-level components.
  • takes initial data, configuration, style values such as color and font known as design tokens, and etc.

Editable

is the main UI field to display user-editted data, think it as a canvas on which you edit content.

Element

Though for users who have experience using Notion or Notion-like editors the term Block would be their familiar, we stick to using the term Element so as to follow the Slate's definition. Block and Element are the same, anyway.

Text(, or Leaf)

On the same reason we call inline-level components as Text. Because Slate uses the term Leaf to, we guess, refer to the same component and we think that's redundant, we stick to using only Text in as many situations as possible.

Node

refers to both Element and Text. Read the first section of this Slate's doc to see the difference between them.

Attributes

Each Node has its own set of attributes and their set, or structure, that varies depending on which Node type they are of. One example for an attribute is the href attribute of @bento-editor/element-link which is used to create a link; href: 'https://cam-inc.co.jp' would be regarded as <a href="https://cam-inc.co.jp" />.

Package

is a deliverable parcel which contains a single Node, is to be plugged in to Bento, and can be owned by Bento or you. Examples are Bento-owned packages on the npm registory like @bento-editor/element-paragraph, and any package you create tailored to your service domain like element-{Your Service Name}-media to handle your-service-specific media objects.

Toolbox, Toolbar and Toolmenu

First of all, please read Notion's document of 'Writing & editing basics' to grab the idea of those tools: Toolbox, Toolbar and Toolmenu.

  • Toolbox: is a tool for users to add a new Node, usually Element Node, into the next line; similar one that you see on clicking + icon on Notion Editor.
  • Toolbar: is a tool to edit Text Nodes you selected.
  • Toolmenu: is a tool to editor edit a targeted Element Node, similar one that you see on clicking ⋮⋮ icon on Notion Editor.

How to Create Your Package

Bento has specific types for Node: type Element and type Text in this file. Bento restricts all packages, including yours, to follow those types, but they are simple and straight-forward; You'll just need to define some of the characters found on the Terminology section one-by-one :)

You can read their code of all the Bento-owned packages prefixed with element- or text- as examples when creating your own package.

How to Customize Appearance

Though Bento has most of its UI fixed, it allows users to change some of its design tokens by configuring their key-values, like so:

import { Editor } from '@bento-editor/core';
const config = {
  themeToken: {
    color: {
      background: 'lightblue',
      backgroundOn: 'darkblue',
    }
  }
};

const YourEditor = () => {
  return (
    <Editor config={config} />
  );
};

Remember that Bento doesn't intend to offer full-customizable functions related to design, rather Bento offers you the way to adjust its design to your service UI design by allowing you to change only design tokens like color, space, font size, etc. Read this for detail about all the customizable tokens.

Bento watches users' prefers-color-scheme CSS media feature and switches design tokens accordingly. Pass token values for both light and dark modes separately like this:

const config = {
  themeToken: {
    color: {
      light: {
        background: 'lightblue',
        backgroundOn: 'darkblue',
      },
      dark: {
        background: 'darkblue',
        backgroundOn: 'lightblue',
      },
    }
  }
};