search

alohaeditor / Aloha-Editor

Aloha Editor is a JavaScript content editing library
http://www.alohaeditor.org
Other
2.46k stars 535 forks source link

moving around SVGs, inline IMGs and canvas elements broken in howling-mad #1260

Open johanneswilm opened 10 years ago

johanneswilm commented 10 years ago

Great work on this @petrosalema !

This all looks very nice!

But one little (and annoying) issue: I reported a bug concerning caret moving using contenteditable to the major open source browsers' report systems: https://bug873883.bugzilla.mozilla.org/attachment.cgi?id=751510

I now tried it with your alternative (adding it to demo/aloha-ui/index.html) and unfortunately the result was the same as when using contenteditable.

johanneswilm commented 10 years ago

I will paste the contents of my modified index.html below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Aloha Editor UI Integration Demo</title>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="aloha-ui.css" rel="stylesheet">
  <style>
svg, canvas {
width: 10px;
height: 10px;
}
canvas {
border: 1px solid black;
}
</style>
  </head>

  <body>

    <div class="container">
        <div class="menu-wrap">
            <div class="aloha-ui aloha-sticky-top btn-toolbar" role="toolbar">
                <div class="btn-group">
                    <button type="button" class="aloha-action-B btn btn-default" title="Bold"><b>B</b></button>
                    <button type="button" class="aloha-action-I btn btn-default" title="Italic"><i>I</i></button>
                    <button type="button" class="aloha-action-unformat btn btn-default" title="Remove formatting"><span class="glyphicon glyphicon-remove"></span></button>
                </div>

                <div class="btn-group">
                    <button type="button" class="aloha-action-OL btn btn-default" title="Ordered List"><span class="glyphicon glyphicon-list"></span></button>
                    <button type="button" class="aloha-action-UL btn btn-default" title="Unordered List"><span class="glyphicon glyphicon-list"></span></button>
                </div>

                <div class="btn-group">
                    <button type="button" class="aloha-action-undo btn btn-default" title="Undo"><span class="glyphicon glyphicon-step-backward"></span></button>
                    <button type="button" class="aloha-action-redo btn btn-default" title="Redo"><span class="glyphicon glyphicon-step-forward"></span></button>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Paragraph <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#" class="aloha-action-H2">Heading 2</a></li>
                        <li><a href="#" class="aloha-action-H3">Heading 3</a></li>
                        <li><a href="#" class="aloha-action-H4">Heading 4</a></li>
                        <li><a href="#" class="aloha-action-P">Paragraph</a></li>
                        <li><a href="#" class="aloha-action-PRE">Preformatted</a></li>
                    </ul>
                </div>

                <div class="btn-group">
                    <button type="button" data-activeon="a" title="Create Link" class="aloha-action-A btn btn-default">
                        <span class="glyphicon glyphicon-link"></span>
                    </button>
                </div>
            </div>
        </div><!-- /menu-wrap -->

        <div class="aloha-3d aloha-ui">
            <div class="aloha-link-toolbar btn-toolbar" role="toolbar">
                <div class="aloha-arrow-up"></div>
                <input type="text" name="href" placeholder="http://www.aloha-editor.org"/ value="">
                <button class="aloha-action-target btn btn-default" title="Toggle to open link in new window">
                    <span class="glyphicon glyphicon-new-window"></span>
                </button>
                <a class="aloha-link-follow btn btn-default" href="#" target="_blank" rel="noreferrer" title="Follow this link">
                    <span class="glyphicon glyphicon-share-alt"></span>
                </a>
            </div>
        </div>

        <div><!-- limit aloha.markers.hint context -->

        <div xdir="rtl" class="starter-template aloha-editable">

            <h2>Aloha Editor UI Integration Demo</h2>

            <p>
                Sed ut <u><b>perspiciatis</b> <i>unde omnis</i></u> iste <a
                    href="http://www.google.com">www.google.com</a> natus error sit
                voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                dicta sunt explicabo.
            </p>

      <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAATCAYAAABY4MdjAAAAXklEQVQYV2NkwAIYaSioADR7EhA7ADEfyCIpID4AxP1AvA6IX4IE5wGxERCrAnEMEK8HCb4CYlOoxEogzQYS/A/EMPeC2SDOLyAOh3oCrjIQKADigABIEmwmBhhYQQD8cg4UZ545YAAAAABJRU5ErkJggg==" alt="6"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAATCAYAAABY4MdjAAAAXklEQVQYV2NkwAIYaSioADR7EhA7ADEfyCIpID4AxP1AvA6IX4IE5wGxERCrAnEMEK8HCb4CYlOoxEogzQYS/A/EMPeC2SDOLyAOh3oCrjIQKADigABIEmwmBhhYQQD8cg4UZ545YAAAAABJRU5ErkJggg==" alt="6">This paragraph has two images (<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAATCAYAAABY4MdjAAAAXklEQVQYV2NkwAIYaSioADR7EhA7ADEfyCIpID4AxP1AvA6IX4IE5wGxERCrAnEMEK8HCb4CYlOoxEogzQYS/A/EMPeC2SDOLyAOh3oCrjIQKADigABIEmwmBhhYQQD8cg4UZ545YAAAAABJRU5ErkJggg==" alt="6">) at the beginning and end of it.<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAATCAYAAABY4MdjAAAAXklEQVQYV2NkwAIYaSioADR7EhA7ADEfyCIpID4AxP1AvA6IX4IE5wGxERCrAnEMEK8HCb4CYlOoxEogzQYS/A/EMPeC2SDOLyAOh3oCrjIQKADigABIEmwmBhhYQQD8cg4UZ545YAAAAABJRU5ErkJggg==" alt="6"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAATCAYAAABY4MdjAAAAXklEQVQYV2NkwAIYaSioADR7EhA7ADEfyCIpID4AxP1AvA6IX4IE5wGxERCrAnEMEK8HCb4CYlOoxEogzQYS/A/EMPeC2SDOLyAOh3oCrjIQKADigABIEmwmBhhYQQD8cg4UZ545YAAAAABJRU5ErkJggg==" alt="6">
</p>
<p><svg><g><rect x="0" y="0" width="8" height="8" style="fill:red;" /></g></svg><svg><g><rect x="0" y="0" width="8" height="8" style="fill:red;" /></g></svg>This paragraph has two SVGs (<svg><g><rect x="0" y="0" width="8" height="8" style="fill:red;" /></g></svg>) at the start and end.<svg><g><rect x="0" y="0" width="8" height="8" style="fill:red;" /></g></svg><svg><g><rect x="0" y="0" width="8" height="8" style="fill:red;" /></g></svg></p>
<p><canvas></canvas><canvas></canvas>This paragraph has two canvas elements (<canvas></canvas>) before and after it.<canvas></canvas><canvas></canvas></p>
<p><span contenteditable="false">[ne]</span><span contenteditable="false">[ne]</span>This paragraph has two noneditable elements (<span contenteditable="false">[ne]</span>) before and after it.<span contenteditable="false">[ne]</span><span contenteditable="false">[ne]</span></p>
<p><span contenteditable="false">[n<span contenteditable="true">E</span>e]</span><span contenteditable="false">[n<span contenteditable="true">E</span>e]</span>This paragraph has two noneditable elements width editable islands inside of them (<span contenteditable="false">[n<span contenteditable="true">E</span>e]</span>) before and after it.<span contenteditable="false">[n<span contenteditable="true">E</span>e]</span><span contenteditable="false">[n<span contenteditable="true">E</span>e]</span></p>

            <ul>
                <li>Nemo</li>
                <li>Enim</li>
                <li>Ipsam</li>
            </ul>

            <h2>Magnam aliquam quaerat</h2>

            <p>
                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
                consectetur, adipisci velit, sed quia non numquam eius modi tempora
                incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </p>

            <p>
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
                suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
                autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
                nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
                voluptas nulla pariatur?
            </p>

        </div><!-- /.aloha-editable -->

        </div><!-- / limit aloha.markers.hint context -->

    </div><!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="../../src/require-pronto.js"></script>
    <script src="../../src/require-pronto.dev.js"></script>
    <!--script src="../../build/aloha.min.js"></script-->
    <script>
        function main (aloha) {
            Array.prototype.forEach.call(document.querySelectorAll('.aloha-editable'), aloha);
        }
        if ('undefined' === typeof aloha) {
            require('../../src/aloha', function (aloha) {
                window.aloha = aloha;
                main(aloha);
            });
        } else {
            main(aloha);
        }
    </script>
    <script src="aloha-ui.js"></script>
    <script src="aloha-ui-sticky.js"></script>
    <script src="aloha-ui-links.js"></script>

  </body>
</html>
johanneswilm commented 10 years ago

Maybe this shows that the problem is inside the selection code of the browser and not contenteditable itself? If so, maybe we should try to get a working W3 Selection Spec up and running?

petrosalema commented 10 years ago

@johanneswilm We're incredibly busy with the upcoming launch of this alpha launch, so we won't be able to look into this in the next week or two.

Your guess that this is likely an issue with the selection code rather than contenteditable is most probably correct, since there is not use of contenteditable in the new Aloha Editor.

Perhaps you can work a patch that we can work into selection.js?

johanneswilm commented 10 years ago

Uh, I am not sure it can be fixed at all. I was using this to find out if your approach would work at all. If it can't handle things like non-editable islands, islands with lakes and inline images/SVGs, then I am afraid it doesn't really have many advantages over contenteditable itself.

But, i can see if I find some time and try it out. In the case of inline-SVGs I already created a small fix that at least stops the Javascript from throwing errors. I will let you know if I manage to fix any of this through the selection.js and will of course push everything your way then.