Code Monkey home page Code Monkey logo

philtre's Introduction

Readme

Description

A block-based content editor, with support for static html generation, in phoenix live view.

Disclaimer {: .warning}

This library is still heavily in development.

Things will break and at least initially, they will not maintain backwards compatibility. In fact, the final, release-worthy version may never see the light of day.

Use it at your own risk!

Currently supports the following blocks:

  • a generic content-editable wrapped which can output any of: <p>, <h1>, <h2>, <h3>, <ul>, <pre>, <blockquote>
  • a very badly styled table
  • a code block with synthax highlighting for elixir only

Installation and Usage

Add it to your dependencies in mix.exs:

deps: [
  # ...
  {:philtre, "~> 0.10"}
  # ...
]

Include the styles somewhere in your application, for example, from app.js:

import 'philtre/dist/index.css';

Or from app.css:

@import 'philtre/dist/index.css';

Import and add the necessary hooks to your live view application

import * as philtreHooks from 'philtre/src/hooks';

const liveSocket = new LiveSocket('/live', Socket, {
  hooks: { ...philtreHooks, ...yourHooks },
});

Render the page component inside one of your live views

def mount(%{}, _session, socket) do
  {:ok, assign(socket, %{editor: Philtre.Editor.new()})}
end

def render(assigns) do
  ~H"""
  <button phx-click="save">Save</button>
  <.live_component
    module={Philtre.UI.Page}
    id={@editor.id}
    editor={@editor}
  />
  """
end

def handle_event("save", %{}, socket) do
  json = Philtre.Editor.serialize(socket.assigns.json)
  # Save the json however you please
  # Load into editor using Philtre.Editor.normalize/1
  inspect(json)
  {:noreply, socket}
end

def handle_info({:update, %Philtre.Editor{} = editor}, socket) do
  {:noreply, assign(socket, :editor, editor)}
end

Developing using Playground

Playground is a locally setup, minimal phoenix application which loads the editor files using local paths, so they are always kept up to date and are even being watched by esbuild.

THis means it allows for live-reload development of hte library.

To start it, run mix playground

Note that editor pages are saved as files under playground\priv\documents so you should probably periodically clean them.

philtre's People

Contributors

begedin avatar

Stargazers

Roman avatar

Watchers

James Cloos avatar

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.