Support for fields other than <textarea> about ghosttext-for-chrome HOT 38 CLOSED

cacodaimon commented on September 17, 2024

Support for fields other than

<p>from ghosttext-for-chrome.</p></section>
</section>

</article>

<article>
  <h2 class="h2">Comments (38)</h2>
  
    
    
<section class="issue-comment">
  <section id="48474834" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Before we start this we should find a way to abstract this part because:</p>
<ul dir="auto">
<li>keep this complexity apart from the content script</li>
<li>new browser based editors will come</li>
<li>this part could be reused in an firefox plug in</li>
</ul>
<p dir="auto">Lets start with a simple interface called <code class="notranslate">IEditable</code>, I will use some Java inspired pseudocode:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="interface IEditable {

bind(domElement);

unbind();

textChangedEvent(callback);

selectionChangedEvent(callback);

changeText(text);

getText();

getSelection();

setSelection(selection);
}"><pre class="notranslate"><code class="notranslate">interface IEditable {

bind(domElement);

unbind();

textChangedEvent(callback);

selectionChangedEvent(callback);

changeText(text);

getText();

getSelection();

setSelection(selection);
}
</code></pre></div>
<p dir="auto">The textarea implementation could look like this.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class TextArea implements IEditable {
    private domElement;

bind(domElement) {
        this.unbind()
        this.domElement = domElement;
    }

unbind() {
        if (!this.domElement) {
            return;
        }

$(this.domElement).off('.ghost-text');
    }

textChangedEvent(callback) {
        $(this.domElement).on('input.ghost-text', callback);
    }

selectionChangedEvent(callback) {
        //...
    }

changeText(text) {
        $(this.domElement).val(text);
    }

getText() {
        return $(this.domElement).val();
    }

getSelection() {
        return [{
            start: this.domElement.selectionStart,
            end: this.domElement.selectionEnd
        }];
    }

setSelection(selection) {
        this.domElement.selectionStart = selection[0].start;
        this.domElement.selectionEnd = selection[0].end;
    }
}"><pre class="notranslate"><code class="notranslate">class TextArea implements IEditable {
    private domElement;

bind(domElement) {
        this.unbind()
        this.domElement = domElement;
    }

unbind() {
        if (!this.domElement) {
            return;
        }

$(this.domElement).off('.ghost-text');
    }

textChangedEvent(callback) {
        $(this.domElement).on('input.ghost-text', callback);
    }

selectionChangedEvent(callback) {
        //...
    }

changeText(text) {
        $(this.domElement).val(text);
    }

getText() {
        return $(this.domElement).val();
    }

getSelection() {
        return [{
            start: this.domElement.selectionStart,
            end: this.domElement.selectionEnd
        }];
    }

setSelection(selection) {
        this.domElement.selectionStart = selection[0].start;
        this.domElement.selectionEnd = selection[0].end;
    }
}
</code></pre></div>
<p dir="auto">By this way we could add other "editors" easily without messing up the code…</p>
<p dir="auto">Interfaces in JS: <a href="https://developers.google.com/closure/compiler/docs/js-for-compiler?hl=de#tag-interface" rel="nofollow">https://developers.google.com/closure/compiler/docs/js-for-compiler?hl=de#tag-interface</a></p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="48478864" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Perfect. Yes. The interface will also need a <code class="notranslate">search</code> method as well to see if the page contains any elements like that. Something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var areas = []; 
areas.push.apply(TextareaField.search());
//areas == [textarea1, textarea2]
areas.push.apply(ACEField.search());
//areas == [textarea1, textarea2, acefield]
areas.push.apply(CodeMirrorField.search());
//areas == [textarea1, textarea2, acefield, codemirrorfield]"><pre class="notranslate"><code class="notranslate">var areas = []; 
areas.push.apply(TextareaField.search());
//areas == [textarea1, textarea2]
areas.push.apply(ACEField.search());
//areas == [textarea1, textarea2, acefield]
areas.push.apply(CodeMirrorField.search());
//areas == [textarea1, textarea2, acefield, codemirrorfield]
</code></pre></div>
<p dir="auto">As well as some <code class="notranslate">focus</code> methods like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var waitForAny = function () {
    $.each(area, function () {
        this.waitForFocus(stopAllWaitingCallback);
    });
}
var stopAllWaitingCallback = function () {
    $.each(area, function () {
        this.stopWaiting();
    });
}
if(areas.length === 1) {
    area[0].activate();
} else if(areas.length > 1) {
    waitForAny();
}"><pre class="notranslate"><code class="notranslate">var waitForAny = function () {
    $.each(area, function () {
        this.waitForFocus(stopAllWaitingCallback);
    });
}
var stopAllWaitingCallback = function () {
    $.each(area, function () {
        this.stopWaiting();
    });
}
if(areas.length === 1) {
    area[0].activate();
} else if(areas.length > 1) {
    waitForAny();
}
</code></pre></div>
<p dir="auto">Or something like that</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="48653922" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Let me do the interface and the text area implementation at the weekend.</p>
<p dir="auto">Even if are only supporting the text area in Milestone 1 the interface should be already implemented.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="48831913" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/535282?s=30&u=7101d611e11015bdd242b4735a8e6f61e25d3c51&v=4" alt="mandx avatar" />
    <a class="issue-username" href="/mandx">mandx</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">What about <code class="notranslate">contenteditable</code> elements? Is support for that planned? Gmail uses <code class="notranslate"><div contenteditable="true"> [...] </div></code> elements to compose/replay emails. I think only plain-text editing would be supported, but that should cover most cases.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
   
    
<section class="issue-comment">
  <section id="48842870" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">I think we kind of could, but we'd have to warn people that formatting will be lost. The only difference with the textarea is that we'd have to somehow convert linebreaks into <code class="notranslate"><br></code> and <code class="notranslate"><p></code></p>
<p dir="auto">People would probably expect to support rich text editing eventually, which Sublime Text doesn't have. Adding a HTML->Markdown->HTML converter is unlikely, that'd feature alone would be bigger than GhostText itself and prone to issues.</p>
<p dir="auto">OOoorr… we could push HTML to Sublime Text instead of plain text, which would be kinda nice, actually.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="48850503" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/535282?s=30&u=7101d611e11015bdd242b4735a8e6f61e25d3c51&v=4" alt="mandx avatar" />
    <a class="issue-username" href="/mandx">mandx</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bfred-it/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bfred-it">@bfred-it</a></p>
<ul dir="auto">
<li>Some code for conversion of linebreaks to <code class="notranslate"><br></code>/<code class="notranslate"><p></code> can be found in the <a href="https://docs.djangoproject.com/en/1.6/ref/templates/builtins/#std:templatefilter-linebreaks" rel="nofollow">Django template system</a>.</li>
<li>I agree with not transforming from HTML->Markdown->HTML, just the HTML->Markdown will be pretty hard to accomplish, since most of the HTML email is not the output of Markdown...</li>
<li>The issue that concerns me is the "warning" about loosing formatting, because it's important to warn the user, and it's an extra click/step for the user before start editing in ST, and also, that extra step allows the user to cancel the editiion on ST.</li>
</ul><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="48961158" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">I currently pushed the first proof of concept to the new branch <code class="notranslate">input-area</code>, the code is not working right now, those little ST issues stole my time.</p>
<p dir="auto">But I hope until the end of the week I got a working version.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="49542229" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/5252289?s=30&u=1ccf0e63f3682da37096f396c61e4c2e91ec2ba2&v=4" alt="Feltzer avatar" />
    <a class="issue-username" href="/Feltzer">Feltzer</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mandx/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mandx">@mandx</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bfred-it/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bfred-it">@bfred-it</a></p>
<p dir="auto">Just a quick sidenote: You can actually compose your Gmail messages in markdown by using <a href="http://markdown-here.com/" rel="nofollow">Markdown Here</a>. For that reason alone I would love to see GhostText support Gmail.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="49546261" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">EDIT: actually MDH already seems to handle this:</p>
<blockquote>
<p dir="auto">The problem with that conversion is that <strong>if</strong> a quoted message is below (and not hidden by Gmail) GT will</p>
<ul dir="auto">
<li>flatten it to plain text when pushing it to Sublime</li>
<li>mess up any possible markdown-like text in it when re-converting it to html</li>
</ul>
<p dir="auto">So we might have to detect un-translatable content and warn the user that they'll lose that HTML</p>
</blockquote><p>from ghosttext-for-chrome.</p></section>
</section>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
   
    
<section class="issue-comment">
  <section id="49546402" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">A simple implementation would just complement MDHere, by supporting a contentEditable as a plain text field. The user will have to convert it to HTML <strong>after</strong> using GT, or else GT will receive the generated HTML as plain text (and the formatting will be lost)</p>
<p dir="auto">If we want to integrate that conversion in GT, which may or may not be possible (time, license, …), we can use the <code class="notranslate">contentEditable</code> as a "markdown preview".  This means we'll have to run a HTML-to-MD conversion when the user types in the browser and a MD-to-HTML conversion when the user types in the editor. If this is processor intensive we can throttle it to update once a second.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="49808274" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">The last commit adds basic contentEditable support, I used <a href="http://html5demos.com/contenteditable" rel="nofollow">http://html5demos.com/contenteditable</a> for testing only, when using the content editable's innerHTML the palin HTML gets used and this basically works…</p>
<p dir="auto">Here is a video how good and bad it currently works: <a href="https://www.youtube.com/watch?v=a1MpifbF858&feature=youtu.be" rel="nofollow">https://www.youtube.com/watch?v=a1MpifbF858&feature=youtu.be</a><br>
Please don't share this video due it's quality!</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="49826525" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Love it! It makes sense to write in HTML after all. If the syntax is set to HTML (using GTcontent.guessSyntax) it'd be a breeze to write with emmet</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="49867118" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">I currently tested it with google groups, it worked!<br>
You are right with emmet its pure fun 😄</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="49933269" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">About ACE editor and CodeMirror, it's impossible to access the page JS and it's variables throug the content script, but there might be a workaround: <a href="http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script" rel="nofollow">http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script</a> .</p>
<p dir="auto">What I'm trying now is to add an script to the page which creates a text area in the dom which syncs  with the ace editor and vice versa. The helper text area should then be modifiable by GT as usual… .</p><p>from ghosttext-for-chrome.</p></section>
</section>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
   
    
<section class="issue-comment">
  <section id="50176688" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Why add a helper <code class="notranslate">textarea</code> though? We'll still need to use CodeMirror's API to get/set the text, so why <em>also</em>  keep in sync a textarea?</p>
<p dir="auto">The only issue was access to the the API, once we got that we should be able to work directly on the enabled element</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50193971" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">From the content script only the dom is accessible not the "running" JS. The content script has it's own JS scope. Therefore a little glue is needed - a script injected into the dom which runs in the page JS scope. This scripts accesses the editor's API from here and pushes and pulls the changes to a hidden textarea. The hidden textarea is accessible through the dom and can sync the changes between the both JS scopes, in the theory.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50194312" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Currently only the events aren't working correctly, when this is done we have a running ACE editor support…</p>
<p dir="auto">Communicating through dom events although might be an option. But this has to be tested first, too.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50216714" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Ah, it looks like <a href="https://gist.github.com/mathiasbynens/1143845"><code class="notranslate">unsafeWindow</code> is no longer accessible</a>. You used to be able to access global variables and nodes.</p>
<p dir="auto">Anyway I always suggest avoiding editing the page, so instead of the textarea (which we use exclusively to get the text) why not just use <code class="notranslate">element.dataset.ghosttext</code>? That's available from the contentScript as well.</p>
<p dir="auto">Alternatively just pass the text back an forth using events (which we're going to need anyway)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="//inject on the page:
//update GT
element.CodeMirror.on('change', function (text) {
    $(element).trigger('ghost-text-change', {text: text});
});

//update CodeMirror
$(element).on('ghost-text-update', function(event) {
    element.CodeMirror.set(event.data.text)
});"><pre class="notranslate"><span class="pl-c">//inject on the page:</span>
<span class="pl-c">//update GT</span>
<span class="pl-s1">element</span><span class="pl-kos">.</span><span class="pl-c1">CodeMirror</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'change'</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">trigger</span><span class="pl-kos">(</span><span class="pl-s">'ghost-text-change'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">text</span>: <span class="pl-s1">text</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">//update CodeMirror</span>
<span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'ghost-text-update'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">element</span><span class="pl-kos">.</span><span class="pl-c1">CodeMirror</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-c1">text</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="//use in contentscript
//update GT
$(element).on('ghost-text-change', function(event) {
    GT.updateSublime(event.data.text)
});

GT.onUpdateFromSublime = function (text) {
    $(element).trigger('ghost-text-update', {text: text});
}"><pre class="notranslate"><span class="pl-c">//use in contentscript</span>
<span class="pl-c">//update GT</span>
<span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'ghost-text-change'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c1">GT</span><span class="pl-kos">.</span><span class="pl-en">updateSublime</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-c1">text</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c1">GT</span><span class="pl-kos">.</span><span class="pl-en">onUpdateFromSublime</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">trigger</span><span class="pl-kos">(</span><span class="pl-s">'ghost-text-update'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">text</span>: <span class="pl-s1">text</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50217100" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">The event approach I'm currently trying:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(function() {
…
var inputEvent = document.createEvent("CustomEvent");
inputEvent.initEvent("GhostTextJSCodeEditorInput", false, false);

ghostTextAceEditor.on("change", function(e) {
                        console.log("ghostTextAceEditor.on > change");
                        var value = ghostTextAceEditor.getValue();
                        inputEvent.details = {text: value};
                        window.dispatchEvent(inputEvent);
                    });
…
});"><pre class="notranslate"><code class="notranslate">(function() {
…
var inputEvent = document.createEvent("CustomEvent");
inputEvent.initEvent("GhostTextJSCodeEditorInput", false, false);

ghostTextAceEditor.on("change", function(e) {
                        console.log("ghostTextAceEditor.on > change");
                        var value = ghostTextAceEditor.getValue();
                        inputEvent.details = {text: value};
                        window.dispatchEvent(inputEvent);
                    });
…
});
</code></pre></div>
<p dir="auto">The ACE's focus event is currently not firing, but if it works we need only one additional editor class <code class="notranslate">JSCodeEditor</code> besides the <code class="notranslate">TextArea</code> and the <code class="notranslate">ContentEditable</code>. The rest would be stupid messaging using events.</p>
<p dir="auto">The focus event is working now, this comes from the editor not the editors session 😣 .</p><p>from ghosttext-for-chrome.</p></section>
</section>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
   
    
<section class="issue-comment">
  <section id="50218951" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">The last commit adds basic support for ACE, but there is still a bug which occurs when edition in both directions is enabled. Maybe it can be solved by disabling the ACE change event when setting the text and reenabling it after the text has been modified, but I'm too tired now.</p>
<p dir="auto"><a href="https://www.youtube.com/watch?v=MSrk6cPkeBk&feature=youtu.be" rel="nofollow">https://www.youtube.com/watch?v=MSrk6cPkeBk&feature=youtu.be</a></p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50248996" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">The ACE script does only needs a cleanup, then we can continue with CodeMirror or finish the content editable 😤</p>
<p dir="auto"><a href="https://www.youtube.com/watch?v=TbuMKalmvlM&feature=youtu.be" rel="nofollow">https://www.youtube.com/watch?v=TbuMKalmvlM&feature=youtu.be</a></p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50257148" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Great job! Looking nice</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50327706" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Thank you, now it's time for beta testing and some fine tuning.</p>
<p dir="auto">And we have to take a look at the selections:</p>
<ul dir="auto">
<li>The content editable could be pain in the ass because of the html…</li>
<li>Both ACE and CodeMirror have a line number and char number selection based system which differs from the start and end char selection provided by ST…</li>
</ul><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="50371302" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">contentEditable is alright editing straight HTML for now. I guess eventually we can add some setting to toggle markdown editing or something like that</p><p>from ghosttext-for-chrome.</p></section>
</section>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
   
    
<section class="issue-comment">
  <section id="50534695" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">No I where just talking about the selection logic (you select "Foo Bar" from the text</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=""Bazinga <p>Foo</p> <strong>Bar</strong> Baz""><pre class="notranslate"><code class="notranslate">"Bazinga <p>Foo</p> <strong>Bar</strong> Baz"
</code></pre></div>
<p dir="auto">), and how display the selection in the browsers front end despte the internal hmtl tags...</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="51834327" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Now the ST selection gets send to the ace editor, only the codemirror is missing now…</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52101775" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Only a little testing is need now what do you think?</p>
<p dir="auto">Here is a video showing many of the features <a href="https://www.youtube.com/watch?v=kqMDp65P4bU&feature=youtu.be" rel="nofollow">https://www.youtube.com/watch?v=kqMDp65P4bU&feature=youtu.be</a> it is currently not listed but I think it is good enough to post it on twitter, reddit…</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52105425" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2486553?v=4" alt="philippotto avatar" />
    <a class="issue-username" href="/philippotto">philippotto</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Looks pretty good! I would make the video a little bit faster (maybe 2x?) because 8 minutes are a very long time for such a feature video.</p>
<p dir="auto">I just tested a little bit and had some problems, but they could be independent of the feature set of this issue:</p>
<ul dir="auto">
<li>Syncing ST with Chrome seems to only work if the text field is not empty, initally. I tested this on Github issues and on <a href="http://jsbin.com/" rel="nofollow">JSBin</a>. Just try to use GhostText with an empty text field.</li>
<li>Clicking on the desired text field doesn't work, if the text field already has the focus. One needs to unfocus and refocus the text field.</li>
<li>When closing the tab in ST, Chrome reports an "Connection error". I think, the ST package should listen on the close-event and send an appropriate message to Chrome.</li>
</ul>
<p dir="auto">I hope my comments don't scatter the context of this issue too much.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52190252" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Thanks for the feedback!</p>
<p dir="auto">I gonna try to make a shorter video soon. I can't reproduce the connection error when closing the ST view, which OS are you using?</p>
<p dir="auto">But the rest are bugs indeed:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Fix cant connect with empty JS code editors.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Make all JS code editors blurable.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Blur all editable elements when there are multiple editables on one page.</li>
</ul><p>from ghosttext-for-chrome.</p></section>
</section>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
   
    
<section class="issue-comment">
  <section id="52212398" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Yeah the video doesn't work: Too long, too slow, low res, os elements visible and too many tabs (the user only need to focus on 1 thing), repeated examples, spelling mistakes and the GhostText is hidden in a dropdown. This is exactly why <a href="https://github.com/Cacodaimon/GhostText-for-SublimeText/issues/26" data-hovercard-type="issue" data-hovercard-url="/fregante/GhostText/issues/26/hovercard">I suggested finding a specific list of things</a> to show <strong>before</strong> filming and make a short gif instead.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52221842" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2486553?v=4" alt="philippotto avatar" />
    <a class="issue-username" href="/philippotto">philippotto</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Cacodaimon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Cacodaimon">@Cacodaimon</a>: I'm using Windows 8. I just tried it again and it seems to be a reproducible:</p>
<p dir="auto">When disconnecting Chrome messages a simple "Disconnected" which is fine. If you (quickly?) click again into the text field (in Chrome), there will be the "Connection error" message. I guess some listeners are not properly removed?<br>
By the way: I would make the Sublime view a "scratch" view. This means that no confirmation dialogue will be shown when trying to close the view. Since no data can be lost (the text will be in Chrome anyway), the confirmation dialogue has no value.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bfred-it/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bfred-it">@bfred-it</a>: I totally agree with you.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52232359" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/philippotto/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/philippotto">@philippotto</a><br>
I fixed the focus bug this should work now and the empty editor bug is fixed, too.<br>
The Idea with the scratch mode is great: <a href="https://github.com/Cacodaimon/GhostText-for-SublimeText/releases/tag/1.0.6">https://github.com/Cacodaimon/GhostText-for-SublimeText/releases/tag/1.0.6</a> thanks!</p>
<p dir="auto">About the connection error I try this this weekend on my windows system because I can't reproduce it on my Linux system.</p>
<p dir="auto">I agree the video is too long, but focusing on one page and showing just some markdown and emmet magic is cool for a gif but a video can show some more features in my opinion. Maybe three minutes with a faster timing and focusing on two or three pages (GitHub for markdown, JSBin for work with emmet…) would be better for an video.</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52347121" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/philippotto/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/philippotto">@philippotto</a> I can reproduce the error on my Windows system, it is a ST issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="40376165" data-permission-text="Title is private" data-url="https://github.com/fregante/GhostText/issues/36" data-hovercard-type="issue" data-hovercard-url="/fregante/GhostText/issues/36/hovercard" href="https://github.com/fregante/GhostText/issues/36">fregante/GhostText#36</a> .</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52390604" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bfred-it/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bfred-it">@bfred-it</a><br>
I think it's ready to be merged into the master or do you have any objection?</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52522775" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Everything is merged now, can you upload it to the chrome web store?</p><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52562173" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1402241?s=30&u=0a69930ae8a1fc949f8cce01274389b9b9eb960a&v=4" alt="fregante avatar" />
    <a class="issue-username" href="/fregante">fregante</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><strong>Done,</strong> v1.1.0 is up there</p>
<blockquote>
<p dir="auto">Your item is in the process of being published and may take up to 60 minutes to appear in the Web Store</p>
</blockquote><p>from ghosttext-for-chrome.</p></section>
</section>

<section class="issue-comment">
  <section id="52607370" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2429503?s=30&u=612e988aa8a75d2cc2806e0d62e3d06836bacae6&v=4" alt="Cacodaimon avatar" />
    <a class="issue-username" href="/Cacodaimon">Cacodaimon</a>
    <span class="issue-time"> commented on September 17, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">👍 thx</p><p>from ghosttext-for-chrome.</p></section>
</section>

</article>

<section>
  <h2 class="h2">Related Issues (20)</h2>
  <div class="issue">
    <ul>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/35">Time to celebrate</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/36">Support fields within frames (Disqus)</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 13</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/37">Keyboard hotkey for Linux collides with "Show bookmarks bar"</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/38">⌘ + K key binding in Chrome Extension is already used</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/39">Make input-area.js Firefox compatible</a> 
          
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/40">Support of g_editable elements</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/41">Highlight keeps on connection error</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/42">Fails after switching to Sublime Text (OSX 10.9.4, Sublime Text 3)</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/43">Events, mono-repo discussion</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 12</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/44">On pressing ctrl+shift+h, 4-5 sublime windows pop up and the text-to-chrome doesn't work</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/45">GhostText can't handle multiple file tabs in Codecademy</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/46">No longer working in Chrome</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/47">Ghost is opening 2 to 7 tabs when clicking in</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/48">Ghosttext fills the Chrome developer console with "Array[2]" #52</a> 
          
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/49">Ghost Text Says that it is running and to switch to console, but no code opens</a> 
          
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/50">blank render</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/51">Doesn't seem to work with the latest Chrome</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span>
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/52">ISSUES MOVED, open them in the main repo:</a> 
          
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/53">How do I activate Ghosttext? </a> 
          
        </li>
      
        <li>
          <a href="/cacodaimon/ghosttext-for-chrome/issues/54">Multi-caret editing. Sublime text 3 + Chrome</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
    </ul>
  </div>
</section>

</main>
        <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color">
          <div class="w-full md:w-60 h-0.5"></div>
          <section>
            
            
            
<h2 class="h2 py-3.5">Recommend Projects</h2>
            <ul>
              <li class="mb-4">
                
              </li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/facebook/react">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png"
        alt="React photo"
      />
      
      React
    </a>
  </h3>
  <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/vuejs/vue">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67"
        alt="Vue.js photo"
      />
      
      Vue.js
    </a>
  </h3>
  <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/microsoft/TypeScript">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://www.typescriptlang.org/favicon-32x32.png"
        alt="Typescript photo"
      />
      
      Typescript
    </a>
  </h3>
  <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/tensorflow/tensorflow">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67"
        alt="TensorFlow photo"
      />
      
      TensorFlow
    </a>
  </h3>
  <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/django/django">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4"
        alt="Django photo"
      />
      
      Django
    </a>
  </h3>
  <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/laravel/laravel">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://laravel.com/img/logomark.min.svg"
        alt="Laravel photo"
      />
      
      Laravel
    </a>
  </h3>
  <p class="article-more pt-1">A PHP framework for web artisans</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/d3/d3">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667"
        alt="D3 photo"
      />
      
      D3
    </a>
  </h3>
  <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p>
</article>

</li>
              
              <li>
                <div>
                  
    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
  
                </div>
              </li>
            </ul>
          </section>

<section>
            
            
<h2 class="h2 py-3.5">Recommend Topics</h2>
            <ul>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/javascript">
      
      javascript
    </a>
  </h3>
  <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/web">
      
      web
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/server">
      
      server
    </a>
  </h3>
  <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/machine-learning">
      
      Machine learning
    </a>
  </h3>
  <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/visualization">
      
      Visualization
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about visualization, use data art</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/game">
      
      Game
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p>
</article>

</li>
              
              <li>
                
    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7917632214101949"
      data-ad-slot="6627871389"
      data-ad-format="auto"
      data-full-width-responsive="true"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
  
              </li>
            </ul>
          </section>

<section>
            
            
<h2 class="h2 py-3.5">Recommend Org</h2>
            <ul>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/facebook">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/69631?v=4"
        alt="Facebook photo"
      />
      
      Facebook
    </a>
  </h3>
  <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/microsoft">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/6154722?v=4"
        alt="Microsoft photo"
      />
      
      Microsoft
    </a>
  </h3>
  <p class="article-more pt-1">Open source projects and samples from Microsoft.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/google">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1342004?v=4"
        alt="Google photo"
      />
      
      Google
    </a>
  </h3>
  <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/alibaba">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1961952?v=4"
        alt="Alibaba photo"
      />
      
      Alibaba
    </a>
  </h3>
  <p class="article-more pt-1">Alibaba Open Source for everyone</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/d3">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1562726?v=4"
        alt="D3 photo"
      />
      
      D3
    </a>
  </h3>
  <p class="article-more pt-1">Data-Driven Documents codes.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/tencent">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/18461506?v=4"
        alt="Tencent photo"
      />
      
      Tencent
    </a>
  </h3>
  <p class="article-more pt-1">China tencent open source team.</p>
</article>

<footer class="sizeing text-xs text-center p-5">
  <div>Friends: 
    <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a>
  </div>
  Copyright © 2024 Git Product  ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a>
</footer>
  </body>
</html>