Skip to content

Commit

Permalink
Initial import
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonseney
jasonseney authored Feb 17, 2024
0 parents commit a90b095
Show file tree
Hide file tree
Showing 61 changed files with 12,800 additions and 0 deletions.
84 changes: 84 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
Ligature
========

Ligature is a WYSIWYG & Plaintext `contenteditable` text editor with 3 core values:

- Provide a simple interface, showing tools within the context of the writing process.
- Sections of text and media are structured in un-nested blocks.
- Flexible and robust API for integration into a wide range of text editing platforms.

## Setup & Build

Development dependencies are loaded using **npm**. To integrate into a project with **browserify**, build from source using the `src/ligature.js` file as the entry point.

#### Steps to get developing:

1. `npm install` to get dev dependencies
2. `npm run watch` (live updates) OR `npm run build` to build the distribution file
3. `npm run docs` after making code changes to update the documentation
4. The Ligature JS and CSS will be built to the `dist` folder, which are used in the demo.

#### To create a new release:

1. Merge your branch into master
2. Update the `package.json` file with a new version, using the [Semantic Versioning](http://semver.org) guidelines.
3. Create a new release in GitHub, with the _same_ version number used in step 2.

If you're including Ligature in another project, you can now update the version number there, and run `npm update ligature` to fetch the new version.

## Usage

**TODO:** Add additional config options here!

var config = {
placeholder: 'Enter text here...',
characterLimit: null,
onChange: function() {
console.log('Rich Text Changed to: ' + this.getData());
},
onSelection: function(selection) { },
onClientEvent: function(e) { },
pasteHook: function(clipboardData, shiftKey) { },
onImageAdded: function(imgElement, file) { },
flattenBlocks: true,
runIFrameSanitization: false,
filterForSetData: function(html) { return html; },
filterForGetData: function(html) { return html; },
filterRules: {
elements: [ 'a', 'b', 'i', 'strike' ], // only allow these
attributes: { // only allow these
a: ['href', 'title'],
img: ['src', 'alt', 'data-img-key', 'data-orig-width', 'data-orig-height']
},
protocols: {
a: false, // this disables the default protocol filtering
iframe: { src: [ 'https://', 'http://', '//' ] } // only allow these
}
}
};

var editableElement = $('[contenteditable]').get(0);

var richTextInstance = new Ligature.RichTextEditor(editableElement, config);

*See the [demo.js](https://github.tumblr.net/pages/Tumblr/ligature/doc/demo.js.html) file for more examples of use.*

## ES6 Syntax Warning

Babel does not transpile this repo during Jenkins asset builds for the `tumblr` repo. So although ES6 syntax (`let`, `const`, `=>`, etc.) will build
and run fine during development it *will* throw an error when compiling assets for deployment on production. Stick to ES5 syntax to avoid such issues.

## Styling

All styles are in `editor.css`, including mapping of icon font characters. The `demo.html` includes two external style sheets:

1. [Normalize.css](http://necolas.github.io/normalize.css/)
2. [Font Awesome](http://fontawesome.io)

These are not required, and are used as a base line / icon font for the interface. By modifying the `editor.css` file, any type of skin or styles can be created for the editor. Some generic styles are added to the editor controls for styling - do be aware that if you integrate the editor into a site that already has styles for these classes, there could be styling conflicts if not scoped appropriately.

## Documentation

Docker is used to auto generate the documentation of all code comments.

You can browsed the HTML docs on Github Pages here: [Ligature Documentation](https://github.tumblr.net/pages/Tumblr/ligature/doc/README.md.html).
142 changes: 142 additions & 0 deletions demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Ligature</title>
<link rel='stylesheet' href='lib/normalize.min.css'>
<link rel='stylesheet' href='lib/font-awesome-4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='dist/editor.css'>
<style type='text/css'>
#content {
background: rgba(0,0,0,.05);
}
.column {
width: 540px;
margin: 40px auto;
padding: 20px 40px;
border: 1px solid rgba(0,0,0,.06);
border-radius: 2px;
}
.header {
color: rgba(0,0,0,.85);
font-size: 1.5em;
}
.title {
font-size: 1.5em;
font-family: Garamond, serif;
}
.desc {
font-weight: normal;
font-family: Helvetica Neue, sans-serif;
}
#example a { color: rgb(80,80,80); }
blockquote {
padding-left: 1em;
border-left: .4em solid rgba(0,0,0,.06);
}
button {
border-radius: 2px;
border: 1px solid rgba(0,0,0,.15);
margin: 0 10px 0 0;
padding: .5em 1em;
font-size: .8em;
background:transparent;
}
iframe {
}
figure {
margin: 0 0 1em 0;
}
</style>
</head>
<body>

<div id="container">
<div id="content" class="column">

<h1 class="header"><span class='title'>Ligature </span><span class="desc">&mdash; A Contextual Editor</span></h1>

<div style="position: relative;">
<div id="demo-editor-plain" class="editor-plain editor" contenteditable="true"></div>
</div>

<div style="position: relative;">
<div id="demo-editor-rich" class="editor-rich editor" contenteditable="true"></div>
</div>

<button id='normal'>Copy Example</button>&nbsp;<button id='flat'>Copy and Flatten</button>

</div>
<div id="example" class="column">

<h2>Example Content</h2>

<p>Outstanding photographers&nbsp;<a href="http://swopes.vsco.co/" target="_blank">Swopes</a>,&nbsp;<a href="http://mrevidence.vsco.co/" target="_blank">Mr. Evidence</a>,&nbsp;<a href="http://13thwitness.vsco.co/" target="_blank">13thWitness</a>,&nbsp;<a href="http://trashhand.vsco.co/" target="_blank">trashhand</a>, and&nbsp;<a href="http://vanstyles.vsco.co/" target="_blank">Van Styles</a>&nbsp;have created a dynamic collection of images that encompass wild streets and workspaces, pioneers and poets, fighters and fools, and shadow and light. <i>Now it is your turn.</i></p>

<p>We are proud to announce <b>HYPEBEAST x VSCO</b>, a collaboration between two brands committed to pushing things forward.</p>
<hr />

<p>Download the free HYPEBEAST X VSCO Preset Pack in the&nbsp;<a href="http://vsco.co/vscocam" target="_self">VSCO Cam Store</a>, upload your images to&nbsp;<a href="http://grid.vsco.co/" target="_self">VSCO Grid</a>&nbsp;with the hashtag #HYPEBEAST, and view&nbsp;<a href="http://thisishypebeast.vsco.co/" target="_blank">thisishypebeast.vsco.co</a>, an exclusive, curated collection showcasing the lives of HYPEBEAST readers across the globe.</p>

<blockquote>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</p>
<blockquote>
<p><img src="lib/200.jpg" alt="Tiny Image"/></p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh</p>
<p>We’ve created a Limited Edition HYPEBEAST x VSCO Preset Pack available for FREE. Bold and modern, the Presets are available to download for a limited time in the VSCO Cam In-App Store.</p>
</blockquote>

</blockquote>

<p>HYPEBEAST is a worldwide, forward-thinking, and influential source for lifestyle and fashion editorial.</p>

<ul>
<li>trashhand / trashhand.vsco.co</li>
<li>Van Styles / vanstyles.vsco.co</li>
<li>Swopes / swopes.vsco.co</li>
<li>13thWitness / 13thwitness.vsco.co</li>
</ul>

<p>We admire HYPEBEAST’s unwavering dedication to creative culture and the artists, designers, fashionistas, and hip-hop heads who embody it.</p>

<blockquote>
<ol>
<li>trashhand / trashhand.vsco.co</li>
<li>Van Styles / vanstyles.vsco.co</li>
<ul>
<li>Van Styles / vanstyles.vsco.co</li>
<li>Swopes / swopes.vsco.co</li>
</ul>
<li>Swopes / swopes.vsco.co</li>
<li>13thWitness / 13thwitness.vsco.co</li>
</ol>
</blockquote>

<h2>Some code:</h2>

<pre>// Upload input
var fileUploader = $('&lt;input /&gt;', {
'type': 'file',
'accept': 'image/*'
});</pre>

<hr />

<img src="lib/500.jpg" alt="Fancy Image"/>

<p>An <code>&lt;iframe&gt;</code> element:</p>

<figure>
<iframe src="http://player.vimeo.com/video/108838765" width="500" height="281" frameborder="0"></iframe>
</figure>
</div>
</div>

<script type="text/javascript" src="dist/ligature.js"></script>

<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
Loading

0 comments on commit a90b095

Please sign in to comment.