• Stars
    star
    206
  • Rank 190,504 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 2 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A tiptap integration for Rails compatible with ActionText

Purpose

To create a grab and go WYSIWYG editing experience that can hook into Ruby on Rails ActionText backend. Currently this package does so using TipTap but will most likely include another integration for ProseMirror to allow for both Markdown + WYSIWYG editing.

Note: This package is still in beta and is currently not recommended for production use until a 1.0 is released.

Documentation

https://rhino-editor.vercel.app

Local Development

This section is for contributing to Rhino Editor.

Getting up and running locally is hopefully quite painless. We have a test suite using Ruby on Rails and is intended to provide a good demonstration of how this package can hook into ActionText.

Prerequisites

  • Ruby 3.1.2
  • Rails 7.0.4
  • PNPM (npm install -g pnpm)
  • Playwright
  • Node >= 16
  • Docker (Used to run a simulated S3 server)
  • Overmind (Preferred, not needed)

Installation

Run the following commands in the bash to setup dependencies:

git clone https://github.com/konnorrogers/rhino-editor
cd rhino-editor
pnpm run setup

Running the server

The easiest way to run the server is using Overmind

overmind start -f Procfile.dev

Then navigate to localhost:5100

Without Overmind

To run the server without overmind do the following in seperate terminals:

bin/vite dev --clobber
bin/rails s
docker compose up --build

Then navigate to localhost:5100

Running the test suite

Make sure to have the docker server up and running, the test suite will fail without it.

docker compose up --build
bundle exec rails test:all

Listening for changes to the package

To listen for changes, keep your rails server running and open a new terminal with the following:

pnpm run start

This will start an ESBuild watcher process. Vite in Rails will automatically pick up changes.

Adding a changelog entry

To add a changelog entry, we use https://github.com/changesets/changesets. Run the following command and then answer the prompts:

pnpm changeset

Roadmap to v1

  • - Collaboration Extension. Support collaboration!
  • - Document slots, CSS properties, Extending ActionText, and show common demo examples
  • - Create a ProseMirror base for a markdown + rich text editor
  • - Move the TipTap editor to extend the ProseMirror editor.
  • - Show how to do table editing
  • - Show how to do embeds
  • - Show how to do mentions
  • - Add testing for the basic operations bold, strike, etc.
  • - Add testing for ActionText / Trix compatibility.

More Repositories

1

mrujs

UJS for modern javascript.
TypeScript
163
star
2

shadow-dom-testing-library

An extension of DOM-testing-library to provide hooks into the shadow dom
TypeScript
86
star
3

snowpacker

A gem to help use Rails with Snowpack
Ruby
70
star
4

evil_systems

An easy way to enhance your system tests with Rails and Capybara using EvilMartians System of a Test.
Ruby
55
star
5

snowpack-plugin-rollup-bundle

A plugin for Snowpack to bundle for production.
JavaScript
48
star
6

view-layer-benchmarks

benchmarks of view layers for Rails
Ruby
24
star
7

rails_starter

StimulusReflex, CableReady, Turbo, Vite, Devise, Rails 7 ready to go.
Ruby
22
star
8

diff-view-element

A custom element for constructing diff views
JavaScript
19
star
9

hotkey-listener

A modest js library that dispatches low-level keyboard events in the form of CustomEvents.
JavaScript
16
star
10

light-pen

A lightweight codepen implementation using web components
JavaScript
16
star
11

stimulite

A stimulus-lite
JavaScript
14
star
12

web-component-lazy-loader

A bundler friendly lazy loader for web components
JavaScript
12
star
13

rails-islands

A small POC of how you might build islands into Rails + Vite. There's a ton of ways to make it better.
Ruby
11
star
14

focus-hunter

A focus trapping utility that respects shadow doms and slots
JavaScript
11
star
15

form-associated-helpers

A collection of reusable mixins + helpers for working with form associated custom elements.
JavaScript
10
star
16

bridgetown-automation-tailwindcss

An automation for adding TailwindCss to a project
Ruby
9
star
17

konnors-ninja-keys

Ninja Keys fork!
JavaScript
9
star
18

asset_mapper

A tightly scoped directory parser and json file generator.
Ruby
8
star
19

tailwindcss-plugin-custom-elements

A set of tailwind plugins for working with custom element selects such as ::part() and :state()
JavaScript
8
star
20

exploring-trix

A repository where I explore how to extend Trix.
JavaScript
7
star
21

tailwind-example

JavaScript
7
star
22

rails-shoelace-example

A simple rails app using Shoelace web components
Ruby
6
star
23

config-files

Collection of tmux, zsh, vim, neovim etc files. Also collection of various libraries.
Lua
6
star
24

role-components

Simple role-based components
JavaScript
6
star
25

web-component-define

How I like to make my web components
JavaScript
6
star
26

rhino-element

A web component library with a focus on SSR using liquid templates.
JavaScript
5
star
27

vite_rb

Vite for Rack-based web servers
Ruby
5
star
28

link-click-observer

Link Click Observer to capture all link clicks on a page
JavaScript
5
star
29

konnor-rails-starter

A rails starter for a recent project
Ruby
4
star
30

getting-started-with-bridgetown

A reference repository for getting started with Bridgetownrb
JavaScript
4
star
31

shoelace-rails-importmaps

Using Shoelace + Rails 7.0.0.alpha.2 + importmaps
Ruby
4
star
32

bridgetown-automation-snowpack

Add snowpack to your bridgetown project!
Ruby
4
star
33

fast-element-typescript-starter

A typescript starter repo for Microsoft's FAST Element.
TypeScript
3
star
34

asset-mapper

Mapping JS bundles to manifests.
JavaScript
3
star
35

konnors-lit-helpers

A collection of helpers built by me (Konnor)
JavaScript
3
star
36

bridgetown-automation-stimulus

A Bridgetown automation for adding Stimulus JS
Ruby
3
star
37

bridgetown-snowpack

A collection of packages and examples using Bridgetown with snowpack
Ruby
3
star
38

getting-started-with-rails-6

A starter repo for getting started with Rails 6
Ruby
3
star
39

gatsby-starter-emotion-typescript-and-tests

A gatsby starter with emotion, jest / react-testing-library, and typescript enabled by default
TypeScript
3
star
40

rails6-tailwindcss-skeleton

Rails 6 with Tailwind
Ruby
3
star
41

webpacker-docs-proxy

A proxy of the Webpacker docs
JavaScript
3
star
42

mix-town

A helper to make mixins not look like Clojure
JavaScript
2
star
43

personal-site

My personal site
JavaScript
2
star
44

reactive-fast-element

A reactive controller for FAST meant to simulate Lit's reactive controllers.
TypeScript
2
star
45

konnors-pc

Konnor's Personal Components
CSS
2
star
46

bridgetown-automation-cypress

An automation for adding Cypress to Bridgetown
Ruby
2
star
47

bridgetown-example-cypress

An example for Bridgetown using Cypress for testing
JavaScript
2
star
48

shadow-dom-walk

Walk into the realm of the shadow dom
JavaScript
2
star
49

create-konnor-app

How I like to make my NPM projects.
JavaScript
2
star
50

tailwindcss-plugin-part

Use the ::part() pseudo element with ease.
JavaScript
2
star
51

shadow-dom-testing-library-wtr

Shadow dom testing library...in the browser!
JavaScript
1
star
52

ems_helper

A Rails app designed to help people find the nearest cath lab, trauma center, etc
Ruby
1
star
53

tailwind-gatsby-project

A reference repository for creating Gatsby projects using TailwindCSS
CSS
1
star
54

odin-kittens

Ruby
1
star
55

react-ts-ject

TypeScript
1
star
56

TicTacToeJS

JavaScript
1
star
57

pcr_creator

A Rails app designed to have PCR like functionality
Ruby
1
star
58

odin-facebook

Ruby
1
star
59

paramagicdev

1
star
60

my-blog

Personal blog written with Gatsby
JavaScript
1
star
61

flickr-api-practice

Ruby
1
star
62

fontawesome-free-repro-rails

attempt to repro (didnt work, everything goes as expected)
Ruby
1
star
63

hanami-bookshelf

Hanami 2 Bookshelf
Ruby
1
star
64

portfolio

Portfolio of projects
Liquid
1
star
65

bridgetown-example-capybara

An example of how to use capybara with Bridgetown
Ruby
1
star
66

konnors-deep-selectors

Deep query selectors for shadow dom
JavaScript
1
star
67

vertical-slider

A FAST Element based vertical slider.
TypeScript
1
star
68

likes-dislikes

JavaScript
1
star
69

cableready-vite-error-repro

Reproduce a Vite error with cableready pre7
Ruby
1
star
70

bridgetown-slim-starter

Bridgetown + Slim + Tailwind + HotReload niceness
JavaScript
1
star
71

odin-flight-booker

Flight booking rails app used to simulate forms_with_nested_attributes
Ruby
1
star
72

bridgetown-automation-turbolinks

An automation for adding turbolinks to Bridgetown
Ruby
1
star
73

bun-rhino-issue

Reproduction of issue in Bun + RhinoEditor
Ruby
1
star
74

ruby-tap

Return the initially passed in value
JavaScript
1
star
75

npm-starter

NPM starter
JavaScript
1
star
76

custom_elements_manifest_parser

Ruby based custom elements manifest parser
Ruby
1
star
77

doxxing-time

Setting up docs for bridgetown
JavaScript
1
star