antonmedv / codejar

An embeddable code editor for the browser 🍯
https://medv.io/codejar/
MIT License
1.8k stars 116 forks source link

Document Issue: `Prism.highlightElement` should not be directly used as highlighting function #85

Closed RyanHaoo closed 2 years ago

RyanHaoo commented 2 years ago

Description

README.md demostrates directly passing Prism.highlightElement as the highlighting function: https://github.com/antonmedv/codejar/blob/f7e41cfcbf5535dfcc8965809d4511cf1e201731/README.md?plain=1#L34-L39

However its signature is different from what codeJar expects:

// Prism.highlightElement
(element: HTMLElement, async: Boolean, callback: Function) => void

// What codeJar expects
(e: HTMLElement, pos?: Position) => void

Issue

So when pos is truthy, Prism.js is asked to use worker for every highlighting call and summons confusing error if it is not properly configured to do so.

In my case, an Uncaught SyntaxError: Unexpected token '<' (at undefined:1:1) without any stack trace is thrown on Chrome every time a user types something because the new worker instance gets a html page as it's code.

Solution

  1. Wrap the Prism.highlightElement.

    let jar = CodeJar(
    document.querySelector('.editor'),
    el => Prism.highlightElement(el)
    )
  2. Use highlight.js which has a compatible signature.

    let jar = CodeJar(document.querySelector('.editor'), hljs.highlightElement)

I can make a PR to fix this if you don't have time. And thanks for this great library!

antonmedv commented 2 years ago

Please, make a PR)