josdejong/jsoneditor

Code mode (Ace editor) not working inside shadow DOM

Open

#742 opened on Jul 16, 2019

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (10,781 stars) (2,034 forks)batch import
bughelp wanted

Description

Hi, I want to make a JSON editor custom element. But I meet some problems. Here is my code:

<!DOCTYPE HTML>
<html>
<head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="jsoneditor/jsoneditor.min.js"></script>
</head>
<body>
    <json-editor></json-editor>
</body>
<template id='custom-template'>
        <link href="jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
        <div id="jsoneditor" style="width: 500px; height: 500px;"></div>
</template>
<script>
        var template = document.getElementById('custom-template')
        class CustomJsonEditor extends HTMLElement {
        constructor() {
          super();
          this._shadowRoot = this.attachShadow({mode: 'open'})
          this._shadowRoot.appendChild(template.content.cloneNode(true))
          var options = {
            mode: 'code',
            modes: ["code", "tree"],
          };
    
          this.container = this._shadowRoot.querySelector('div');
          this.editor = new JSONEditor(this.container, options);
        }
      }
      customElements.define('json-editor', CustomJsonEditor);
    </script>
</html>

And the Json editor will become this: image It seems that I need to load the ace theme somewhere, right? I am a beginner on JavaScript. Could you give me some helps? Thank you.

Contributor guide

Tech stack
javascripthtmlcssweb components
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic JavaScriptShadow DOM conceptsAce editor basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate how Ace editor initializes within a shadow DOM. Ensure that Ace's CSS and JS are properly loaded inside the shadow root. Look into the JSONEditor source code to see how it creates the Ace instance. Possibly need to pass a custom document or use attachShadow correctly. Check comments on issue #742 for any guidance from maintainers.