In-page Editing

[mDisna]

Allow users to update the CSV by making text changes directly on the webpage.

Hovering over various elements will outline them, red for containers that do not contain text and are not editable, and blue for elements you can edit directly.

Should this only allow for plain-text edits? (ie: no text styling, creating links?)

[asirota]

Why not just allow editing of text in the current Edit Properties dialog box? The text already appears there so if you could just allow editing there you would not need to implement on screen editing.

On screen editing is a bonus and should allow only plain text edits. If there is an underlying link in the element it should not be disturbed. A few types of elements to think about for how to edit in the edit properties dialog

a. drop down lists (this one could be tricky but you could just allow editing in the edit properties dialog)
b. radio button elements
c. check box elements
d. links

[mDisna]

Why not just allow editing of text in the current Edit Properties dialog box? The text already appears there so if you could just allow editing there you would not need to implement on screen editing.

Editing in-page is actually easier to implement and makes much more sense.

On screen editing is a bonus and should allow only plain text edits. If there is an underlying link in the element it should not be disturbed.

There is no way to change an element and not affect links and styling tags (especially if doing it in the properties window) - these would all be overwritten, same as the text function does now.

[asirota]

I think you already have a demo of the inpage editing working don't you? I forgot about that. Can we schedule some time to review how this would work in a real world scenario?

[asirota]

It's important that the new inline editing feature not be less effective than the current approach.

In my experience of targeting elements the most accurate approach is as follows

1. if an ID exists, use the parent ID of the CSS path

2. if there is no ID available look for an encompassing element that DOES have an ID and use that parent ID

3. if an ID cannot be found use the available class(es)

Using a detailed CSS path with large nesting doesn't seem to always work in my experience.

[asirota]

One approach to take when identifying WHAT can be modified with EZ WildApricot Designer is to isolate only elements of the DOM that have text directly inside them. These HTML tags on WA have text in diretly in them:

INPUTs (value attribute and placeholder attribute)
A
TD
TH
.menuInnerClass
P
SPAN
any H tags (H1-H6)
STRONG
DIV where class="text"
LABEL

But maybe with Javascript you can walk through the DOM and check whether the element has text directly inside it, although in cases like INPUT it's a little more tricky since WA puts stuff in the value and placeholder text.

[mDisna]

But maybe with Javascript you can walk through the DOM and check whether the element has text directly inside it, although in cases like INPUT it's a little more tricky since WA puts stuff in the value and placeholder text.

Yes, I have code that will look for elements that hold text directly:

const hasText = Array.from(target.childNodes).some(
    (node) =>
      node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ""
);

This will identify every kind of element that holds texts, while ignoring empty text elements like <p></p>

[asirota]

Here's what ChatGPT had to say about this:

In HTML, many tags can contain text directly. Here is a list of some of the most common tags that can include text:

Text-Level Semantic Elements

1. <a> - Anchor (link)
2. <abbr> - Abbreviation
3. <b> - Bold text
4. <cite> - Citation
5. <code> - Code snippet
6. <em> - Emphasized text (italic by default)
7. <i> - Italic text
8. <kbd> - Keyboard input
9. <mark> - Marked text (highlighted)
10. <q> - Inline quotation
11. <s> - Strikethrough text
12. <samp> - Sample output
13. <small> - Smaller text
14. <span> - Generic inline container
15. <strong> - Strongly emphasized text (bold by default)
16. <sub> - Subscript text
17. <sup> - Superscript text
18. <time> - Date/time
19. <u> - Underlined text
20. <var> - Variable

Block-Level Elements

1. <address> - Contact information
2. <article> - Article content
3. <aside> - Content aside from the main content
4. <blockquote> - Block quotation
5. <div> - Generic container for block-level content
6. <figcaption> - Caption for a <figure> element
7. <h1> to <h6> - Headings (different levels)
8. <header> - Introductory content or set of navigational links
9. <footer> - Footer content
10. <li> - List item (inside <ul>, <ol>, or <menu>)
11. <main> - Main content of the document
12. <nav> - Navigation links
13. <p> - Paragraph
14. <pre> - Preformatted text
15. <section> - Section of a document

Form Elements

1. <button> - Clickable button
2. <label> - Label for a form element
3. <legend> - Caption for a <fieldset>

These tags support containing text directly and are often used to structure and format content in HTML documents.

[asirota]

I think your code sample will work for every one of those tags other than INPUT... For INPUT you will need to use the

function hasTextValue(inputElement) {
            return inputElement.value.trim().length > 0;
        }

Some sample code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Text Check</title>
</head>
<body>
    <input type="text" id="textInput" value="Hello, world!">
    <input type="text" id="emptyInput" value="">

    <script>
        // Function to check if an input element has text
        function hasTextValue(inputElement) {
            return inputElement.value.trim().length > 0;
        }

        // Select the input elements
        var textInput = document.getElementById('textInput');
        var emptyInput = document.getElementById('emptyInput');

        // Check if the input elements have text
        console.log(hasTextValue(textInput)); // Output: true
        console.log(hasTextValue(emptyInput)); // Output: false
    </script>
</body>
</html>

[mDisna]

Would anyone need to edit a text box?

[asirota]

This will identify every kind of element that holds texts, while ignoring empty text elements like <p></p>

This needs to check the leaf nodes of an element only though because a container DIV which holds lots of text elements will also have textContent set to true, and we don't want anything but the leaf nodes.

[asirota]

Would anyone need to edit a text box?

if it had placeholder text in it?

[mDisna]

Okay, for inputs I can check target.tagName and address accordingly

[asirota]

here's some code chatGPT ran that loops through valid elements that can have text. The problem one I see is DIV which can have other elements inside of it. But maybe you can check to see if the element has other elements in it and then discard it, and continue checking for elements that don't have other elements in them (ie leaf nodes)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Identify Text Elements</title>
</head>
<body>
    <div id="container">
        <h1>Heading</h1>
        <p>Paragraph with text</p>
        <button>Click me!</button>
        <input type="text" value="Input text">
        <textarea>Textarea content</textarea>
        <span>Some span text</span>
        <table>
            <tr><td>Table cell</td></tr>
        </table>
        <div>Another div</div>
    </div>

    <script>
        function identifyTextElements() {
            // Define the list of tags that can contain text
            const tagsWithText = [
                'a', 'abbr', 'address', 'article', 'aside', 'b', 'blockquote', 'button', 'caption', 'cite', 'code', 'dd', 'div', 'dl', 'dt', 'em', 'figcaption', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'label', 'li', 'main', 'mark', 'nav', 'option', 'p', 'pre', 'q', 'section', 'small', 'span', 'strong', 'td', 'th', 'title'
            ];
            // Add input and textarea separately to check their value attribute
            const inputTags = ['input', 'textarea'];

            // Get all elements in the document
            const allElements = document.querySelectorAll('*');

            // Check each element
            allElements.forEach((element) => {
                // Check for text content in regular tags
                if (tagsWithText.includes(element.tagName.toLowerCase())) {
                    if (element.textContent.trim() !== "") {
                        console.log('Element with text content:', element);
                    }
                }
                // Check for value in input and textarea tags
                if (inputTags.includes(element.tagName.toLowerCase())) {
                    if (element.value.trim() !== "") {
                        console.log('Element with value:', element);
                    }
                }
            });
        }

        // Run the function to identify text elements
        identifyTextElements();
    </script>
</body>
</html>

[asirota]

Another thing you probably have to do is if you're looking for an existing element that was encoded that doesn't exist anymore you could popup a message and ask what to do with those "orpahed" elements. Most likely they need to be remapped or discarded altogether.

[mDisna]

We don't need to loop through each element. I took the looping approach with my previous in-page editing demo. But for the latest one, I do the checks on the fly when you mouse over.

  const mouseoverHandler = (event) => {
    const target = event.target;

      const hasText = Array.from(target.childNodes).some(
        (node) =>
          node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ""
      );

      if (hasText) {

      } else {

      }


    }
  };

The above code is used for the outlining. When clicked i then get the element type. It does not identify elements that only contain child elements with text as "hasText".

[mDisna]

Another thing you probably have to do is if you're looking for an existing element that was encoded that doesn't exist anymore you could popup a message and ask what to do with those "orpahed" elements. Most likely they need to be remapped or discarded altogether.

I've considered this, however the missing element may just not be located on that page.

[mDisna]

But I can add a check for elements that aren't found on the page and give the option to remap them

[mDisna]

What functions and style options should be available?

So far there is:

Text elements:

• Change Text
• Replace Text
• Pattern Replace

Menu Container

• Replace Text
• Pattern Replace

A Links

• Change Link Text
• Change Link URL

Buttons

• Change Button Text

Inputs

• Set Value
• Change Placeholder
• Change Text

Misc

• Custom element label
• Hide element
• Active/Inactive for each option

[asirota]

Confirming -- will drop downs, checkboxes and radio buttons be changeable with v3?

[mDisna]

Per our last meeting only form buttons will be modifiable, though labels will be editable.

[asirota]

I realized that dropdowns and options on checkboxes and radio buttons need to be translated as well and that's a common use case. Will that be a problem to add? After all it is text on a page even though it is part of an INPUT field.

[mDisna]

Won't be a problem to add, I had originally included those but removed it. I might have a backup of those functions.

[asirota]

Oh I'm sorry! I was just reflecting on the pieces of text I needed to modify. Maybe they are in the GitHub repo for v2?