All Projects β†’ malcolmessaid β†’ lish

malcolmessaid / lish

Licence: MIT License
Javascript Selection Object Library

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to lish

texthighlighter
a no dependency typescript npm package for highlighting user selected text
Stars: ✭ 17 (+21.43%)
Mutual labels:  dom
html-dom-parser
πŸ“ HTML to DOM parser.
Stars: ✭ 56 (+300%)
Mutual labels:  dom
ElementFinder
Fetch data from HTML and XML via xpath/css and prepare it with regexp
Stars: ✭ 29 (+107.14%)
Mutual labels:  dom
hotshot
Takes screenshots of DOM elements
Stars: ✭ 19 (+35.71%)
Mutual labels:  dom
decoy
jQuery plugin to make decoys for your elements.
Stars: ✭ 53 (+278.57%)
Mutual labels:  dom
Dom
Modern DOM API.
Stars: ✭ 88 (+528.57%)
Mutual labels:  dom
UndoRedo.js
A powerful and simple JavaScript library provides a history for undo/redo functionality. Just like a time machine! πŸ•
Stars: ✭ 19 (+35.71%)
Mutual labels:  dom
pablopunk.com
Blazing fast personal website with Jamstack
Stars: ✭ 16 (+14.29%)
Mutual labels:  dom
page-content-tester
Paco is a Java based framework for non-blocking and highly parallelized Dom testing.
Stars: ✭ 13 (-7.14%)
Mutual labels:  dom
scrollparent.js
A function to get the scrolling parent of an html element.
Stars: ✭ 51 (+264.29%)
Mutual labels:  dom
micell
A collection of functions for front-end development
Stars: ✭ 16 (+14.29%)
Mutual labels:  dom
fox
A Fortran XML library
Stars: ✭ 51 (+264.29%)
Mutual labels:  dom
notes
Notas sobre JavaScript Full Stack
Stars: ✭ 70 (+400%)
Mutual labels:  dom
XrayDOM
πŸ”₯ X-ray your DOM using just the cursor and never open the console again!
Stars: ✭ 13 (-7.14%)
Mutual labels:  dom
xmlresolver
The xmlresolver project provides an advanced implementation of the SAX EntityResolver (and extended EntityResolver2), the Transformer URIResolver, the DOM LSResourceResolver, the StAX XMLResolver, and a new NamespaceResolver. It uses the OASIS XML Catalogs V1.1 Standard to provide a mapping from external identifiers and URIs to local resources.
Stars: ✭ 31 (+121.43%)
Mutual labels:  dom
debug.js
Debugger of JavaScript, by JavaScript, for JavaScript
Stars: ✭ 19 (+35.71%)
Mutual labels:  dom
theroomjs
A vanilla javascript plugin that allows you to outline dom elements like web inspectors
Stars: ✭ 53 (+278.57%)
Mutual labels:  dom
preact-delegate
Preact delegate DOM events
Stars: ✭ 17 (+21.43%)
Mutual labels:  dom
dom-navigator
βš“οΈ JS library that allow keyboard navigation through DOM elements (←↑→↓).
Stars: ✭ 36 (+157.14%)
Mutual labels:  dom
Prakma
Prakma is a framework to make applications using JSX, focusing on writing functional components.
Stars: ✭ 16 (+14.29%)
Mutual labels:  dom

lish

This repo holds the code for the Javascript library lish.

This library has simple functionality. In the context of a chrome extension, lish allows developers to wrap selections with tags (the base case are span tags, but this can easily be changed). It also hashes the content of the selection, giving the tag a class of that hash. This task may seem trivial and is if the selection is within just one tag, but it is more difficult if the selection spans multiple tags.

Current Status

  • lish currently works on any set of sibling nodes that do not have children i.e.
<h1>Test1</h1>
<h5>Test2</h5>
<h6>Test3</h6>
<h3>Test4</h3>

Becomes

<h1>
  Te
  <span class="103495553">st1</span>
</h1>
<h5>
  <span class="103495553">Test2</span>
</h5>
<h6>
  <span class="103495553">Test3</span>
</h6>
<h3>
  <span class="103495553">Test</span>
  4
</h3>

Before After

Goals

  • As lish only works for a set of siblings, a goal of this project is to improve coverage. The next step is to be able to be able to highlight multiple sets of Children. If it can deal with each of the sets on their own it should not be difficult to highlight the pair. i.e.
<header>
  <h1>Test1</h1>
  <h5>Test2</h5>
  <h6>Test3</h6>
  <h3>Test4</h3>
</header>
<main>
  <p>Test 5</p>
  <p>Test 6</p>
</main>

Edge Case Bugs

  • Coverage for Nodes that do not have elemental children but have text node children must be implemented as well. An example of this could be a p tag with an a tag in it. i.e.
<p> Test <a> 1 </a> </p>

Getting Started

  • There are more files in this repository than those that need to be downloaded for lish to be used. The only file that you need to use the functionality is selection.js in the lib folder.
  • Implement the file into your extension by making it a content script in your Manifest.Json. Fire the function 'getSelectionData' through a context menu to use the library.
  • This repository is also an example of how to implement selection.js. Look through the code in the extension folder if you need help with Chrome Extensions. All of the code is well commented so it should help you getting started.

Contributing

  • Any type of contribution is welcome, and if you are interested in adding this project please address an issue and see the contributing guidelines, CONTRIBUTING.md.

Code of Conduct

  • Please contribute respectfully on this projectβ€”anything else will not be tolerated. For more information, see CODE_OF_CONDUCT.md.

License

  • This project uses the MIT license. See the LICENSE for more information.

Fun Facts

  • The name lish comes from the last name of the famous literary editor Gordon Lish. As he was a literary editor, and this project has to do with editing the DOM, and the fact that he went to the same high-school I did, I named it after him.

Authors

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].