kueblc / ldt Goto Github PK

For now style of textarea is unable to be changed, because it will cause bad .ldt label offsets.
I think, it’d be nice for LDT to try to clone generic textarea’s padding, border and other vital styles, in order to behave less rigidly.

Say I want to make a parser for a markdown file but it's able to contain tags/annotations like @foo(bar). I want to color the contents of bar but only if there's a @foo before it - so I tried something like this:

        var parser = new Parser({
            whitespace: /\s+/,
            tagKey: /@\w+/,
            tagValue: /(?<=@\w+)\([^\)]+\)/,
            other: /\S/
        });

But this did not work. When I read the api for a parser, I realized that it's probably first breaking them into separate tokens and then applying the regexes to recognize the type of each token.

Is there a way to achieve what I want or does the api not support this? Maybe you could have support for parsers that can do both .tokenize() and .identify() in one go which would allow this?

Issue

The page linked is: https://kueblc.github.com/LDT/. But it gives 404 - There isn't a GitHub Pages site here.

Thoughts

Github Pages isn't listed as an active environment in the lower left, so maybe it got disabled via settings?

Or maybe it's just not working because there isn't an index.html in root?

In Internet Explorer 8, the tab character has a non-standard width of 6.5 in the input layer, and a width of 1 in the output layer, causing misalignment.

The overlay does not display blank lines

In IE 9, delete and backspace do not update the HTML overlay

I use a modified version of LDT in one of my personal projects. I changed it so that it allows line wraping, and also refactored some of it to follow the standard convention of storing methods in a prototype.

If I repackage my changes to make them optional, would you be interested in pulling from me?

Adding

    if (input.charAt(input.length - 1) === '\n') input += "\n"

at the start of color() and

.ldt pre:empty::after {
  display:block;
  content: " "
}

in the CSS file lets one set the rows to the exact number of lines at the end of update().

This results in a better behavior IMO (no container overflow).

Live example with a "gutter" plugin adapted to the new number of rows.

Edit: :empty is IE9+. I don't know how important IE7 compat is to you and the LDT user base at this point... I'd expect it to be low... I can send a PR if you're interested.

@kueblc this thing kicks some serious booty.

I'm using LDT to syntax-highlight TailwindCSS classes in an HTML editing layer for a WordPress page-building tool.

Lightweight syntax highlighting opens up so many doors if you offer textareas as 'faux code editors' to help less experienced designers know 'what's safe to edit,' etc.

Great work. Happy to use this and very much on board with supporting it, if it's still being worked on.

Dave Bloom

Very nice and brilliant project. We want to have it for our language Arendelle and for Arendelle we have a library that generates span based HTML for highlighting on the web pages.

marker.js project we have has this function markerHighlight that takes string Arendelle and generates HTML for highlighting and we want to replace it with your backend for the highlighting.

The question is which parts of the code much be changed for proper implementation of this idea?

I would like to be able to react on the entering of special characters. For instance, when the user types in {, I would like to automatically add a closing }.

Previously I had tried using LDT in tandem with BehaveJS...but that did not go well, because Behave.JS "ate" the backspace key; which would prevent api.update() to be called.

I know it's not one of the officially supported browsers, but I tried it in iOS (UIWebView). There is a shadow of the text. It looks like maybe the underlying textarea is being render in light gray and is slightly offset a couple pixels. Also it is murderously slow, even for a small bit of text. On the plus side, it reacts to touch events properly (no 300ms delay, drag selection ok, etc.). These are issues that make other similar solutions like codeMirror unusable on iOS.

https://spdx.github.io/spdx-spec/v2.3/SPDX-license-expressions/

based on this reference for license expressions, your current text suggests that to use this both GPL and MIT must be followed though i suspect you meant that the code is licensed with either of them?

If you'd like to publish the package to npm, I've added you to npm.com/ldt as an owner, please feel free to publish any version.

In Opera 11.61, the input layer is too large causing the vertical scrollbar to always be visible

As seen here.

On the left is LDT's source, on the right a demo that highlights what's been added.

Please note that this is whipped out of an old project of mine where I tweaked LDT quite a bit. I've however imported the latest version of TextareaDecorator() which is where the meat of the patch lies (There's also some CSS, some of which may not be necessary).

Monospace is nice for coding, but for my usage of LDT, I want to use a pretty text. So I'd like to use something like Arial or Verdana instead of a monospace font, simply because monospace does not look all too nice.

But using any other font than a monospaced one will cause the letters to be shifted. The letters in the textarea have a wider spacing than in the pre.

Why is that?

Is there any way to remove horizontal scrollbar for it without losing correct rendering?

The project URL is https://kueblc.github.io/LDT/, not .com

As indicated in the title, I am trying to create a Parser ruleset to highlight Markdown.

So far, I can perfectly match the inline stuff for bold and italic text as well as other stuff. However, I am unable to match headers, lists and proper code fences.

It would be nice if you could help me out there! This is my Parser so far:

        var rules = {
            list: /[-\*]\s[^\n\r]*\n?/,
            header: /#\s[^\n\r]*\n?/,
            "bold fix": /[\*\_]{2}[^\_\*\r\n]*[\*\_]{2}?/,
            "italic fix": /[\_\*][^\_\*\r\n]*[\_\*]?/,
            strike: /-[^-]*-?/,
            code: /```[\r\n].*[\r\n]```/,
            quote: />[^\r\n]*\n?/,
            mention: /@[^@\r\n]([a-z0-9\-\._]*)?/,
            url: require("url-regex")(), // Dink! :)
            ip: require("ip-regex")(),
            email: require("email-regex")(),
            hashtag: /(#[a-z0-9][a-z0-9\-_]*)/,
            whitespace: /\s+/,
            other: /\S+/
        };

Kind regards, Ingwie.

Caret is displayed with unfortunate offset

In Firefox 3.6 and IE8 on Windows, non-regular font styles may overflow causing misalignment. This can be avoided for single line tokens by setting display to inline-block and decreasing the bottom margin, (ex, margin-bottom: -1px;).