@stedit/num-text

v1.0.1

Published

a year ago

A simple text editor Web Component for the browser!

Downloads

0High
0Medium
0Low

offroaders123

javascript editor mobile web-components vanilla-javascript desktop text-editor

Num Text

A simple Web Component that adds line numbers and syntax highlighting to the default textarea element!

There are already plenty of code editors out there made for the browser, like CodeMirror or Monaco Editor, but they had more features than what I needed for my own projects, the main one being Smart Text Editor. I decided to go ahead and make my own!

Getting Started

Thanks to the powerful Web Components API, it's possible to create your own HTML elements that abstract away in-depth functionality that may otherwise be hard to work with manually. No need to import any stylesheets, or make any JavaScript calls. Just import the component's source into your page, and let the browser handle the rest!

Creating a Num Text element

To use a <num-text> element in your own page, follow the steps written below:

Add the component's script tag to the <head> of your page. This will register the component as a custom element that you will be able to use in your HTML and JavaScript.
```
<script src="https://cdn.jsdelivr.net/npm/@stedit/num-text/dist/index.min.js"></script>
```

Add a <num-text> element to the page using any of the ways you would for a default HTML element. Now you are ready to start editing!

<!-- Add it directly to your HTML -->
<num-text></num-text>

/* Or create it with JavaScript */
const editor = document.createElement("num-text");

Styling a Num Text element

Changing the default styles of a <num-text> element is fairly simple! Check out how to customize each part of the component's appearance:

<!-- Component structure -->

<num-text>
  <!-- #shadow-root (open) -->

    <style num-text-theme="vanilla-layout" num-text-theme-type="user-agent">
      /* Minimum default component styles */
    </style>

    <style num-text-theme="vanilla-appearance" num-text-theme-type="any">
      /* Additional appearance styles */
    </style>

    <style num-text-theme="vanilla-highlighting" num-text-theme-type="syntax-highlight">
      /* Num Text's vanilla Prism theme styles */
    </style>

    <div part="container">

      <ol part="gutter">
        <li part="line-number">
          <!--
            ::before (Visible line number and it's surrounding padding)
          -->
        </li>
      </ol>

      <div part="content">
        <pre part="syntax">
          <!-- Prism syntax highlighting populates here -->
        </pre>
        <textarea part="editor"></textarea>
      </div>

    </div>

</num-text>

More coming soon!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Num Text

Getting Started

Creating a Num Text element

Styling a Num Text element