<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Providing Touch Bar buttons from JavaScript based on editor cursor position"
   href="https://bugs.webkit.org/show_bug.cgi?id=165579">165579</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>Providing Touch Bar buttons from JavaScript based on editor cursor position
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari Technology Preview
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Macintosh
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>macOS 10.12
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>HTML Editing
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>andrew.herron&#64;ephox.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>In many rich text editors contextual buttons are made available to the user based on cursor position. This seems like a perfect use case for having the buttons appear on the Touch Bar to provide detailed access to potentially obscure features.

We have a couple of examples at Ephox:

<a href="https://www.tinymce.com">https://www.tinymce.com</a> has floating toolbars that appear in scenarios such as when an image is selected or the cursor is in a table

<a href="https://textbox.io">https://textbox.io</a> has buttons that appear on the end of the main toolbar in the same scenarios. We've discussed moving them to a floating toolbar but the Touch Bar would be an awesome alternative.

In particular, the textbox.io table buttons could make great use of a dynamic Touch Bar slider to adjust cell border width, or an expanded colour picker for the cell border and background buttons. The same could even be applied to other more common features such as font size adjustment and text/highlight colour pickers.

I'm not asking for complete canvas-like access to the Touch Bar, that seems like it would be too easy to abuse (an &quot;allow access&quot; popup may alleviate that but there are already a lot of those). I think a way to replicate contextual buttons as seen in native editors would be a great start.</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>