To add a new table inside editor based on new workflow

When using Loree, clicking on the "Table" option in the elements section will open a modal where you can specify the number of rows and columns, as well as the header options and captions for the table.

After providing valid information in the modal, clicking on the "Add Table" button will insert a new table into the editor based on your input.

Currently, there are multiple presets available in the secondary element area, but with the new proposal, there won't be a secondary element tray for the table.

Instead, a modal will open when you click on the table icon in the elements section. In this modal, you will be asked to enter the number of rows, columns, column headers, row headers, and captions for the table.

The default number of rows and columns will be 4x4. The "Add Table" button will be disabled by default, but once you select a header and provide a caption, the button will become enabled.

To provide number of rows, columns, headers and captions while inserting new table into Editor

Now, if the user select 5 rows and 5 columns, including row and column headers, a 5x5 table with headers will be created inside the editor.

The caption field allows you to include any characters, numbers, and special characters you need to provide a descriptive title or explanation for your table.

The caption field does not accept empty spaces as valid input, as it is designed to only accept characters, numbers, and special characters for providing a descriptive title or explanation for your table.

Removed the existing table sub-elements from elements area

Before, users had the ability to add a table directly from the modal input

As part of the recent updates, the secondary table element tray has been eliminated from the Loree editor. This change applies to all Learning Management Systems (LMS). By removing this tray, we have streamlined the process of adding tables, making it even easier and more efficient for users. Now, when you need to insert a table, simply click on the table icon in the elements section, and a modal will appear where you can enter the necessary information. This improvement allows for a smoother and more intuitive experience when creating and editing tables in the Loree editor.

To add border for table cell properties

In the previous version, when a user selected a table and added a border, it would only be applied to the outer table. Additionally, when a user selected an individual cell, there was no option to add a border.

Now, users should have the ability to select an individual cell and apply borders specifically to that cell. Additionally, users should be able to select multiple cells and apply borders to all of them at once. Lastly, users should also have the option to select an entire row or column and apply borders to the selected row or column.

The default border value for table cells is set to 1px solid #a5a5a5. This means that when you add a border to a table cell, it will be a solid line with a thickness of 1 pixel and a color code of #a5a5a5.

To set the border-collapse for table properties

Previously, there was no option to set the border-collapse property for tables, and by default, it would apply to collapse.

Now, the default state for newly created tables should be collapse. However, the border-collapse property will dynamically change based on the table selection. This means that sometimes the tables will have a separate border, and we need to identify and apply it accordingly.

Once the user changes the option to separate, the border-collapse property will be changed to separate as well.

Collapse and Separate view:

Customize the Canvas Studio iframe via Design section

To customize the size for Canvas Studio IFrame contents inside Loree editor

Users have the ability to customize the width of Canvas Studio Iframe contents when selected within the Loree editor. This feature allows for greater customization and flexibility in designing the elements of your content.

The left panel should display the Design section

The Design section in the left panel offers various customization options for Canvas Studio Iframe contents. Under the "Size" category, you can choose from the following options:

1. Full width: This option allows you to make the content span the entire width of the page.

2. Width (% and px): You can specify the width of the content using either a percentage or pixels.

3. Height: It is not recommended to adjust the height in the design section as it is automatically scaled.

4. Aspect ratio: You can set the aspect ratio of the content to 16:9 for optimal display.

The width of the content should be determined dynamically based on the actual contents. By default, any newly added element should have a width of Full width: 100%.

If the selected iframe element has a width specified in pixels or percentage, the design section will automatically fetch and update the width value. This allows the user to easily modify the width of the content. For example, if the width is set to 600 pixels, the design section will automatically display 600 pixels. The user can then update the values and format as desired.

When the "Full width" option is selected, the Iframe element will automatically set its width to 100% and the design section will disable the option to adjust the width. You can only update the width when you uncheck the "Full width" option.

Limited LMS Support

Please note that the features and functionalities mentioned in this knowledge article are available only on the Canvas Learning Management System (LMS).

To customize the space for Canvas Studio iframe contents inside Loree editor

Users have the freedom to customize the padding and margin of any Canvas Studio Iframe contents within the Loree editor. This feature provides flexibility in adjusting the spacing around the element, allowing for a more tailored and visually appealing design.

The Space customization options for Canvas Studio iframe contents in the Loree editor include the following:

- Margin: You can adjust the margin for the top, bottom, left, and right sides of the element.

- Padding: You have the flexibility to set the padding for the top, bottom, left, and right sides of the element.

These options allow you to customize the spacing around the Canvas Studio iframe contents, ensuring a personalized and visually appealing design.

Users will have the ability to customize the margin and padding values in pixels for the spacing around the Canvas Studio iframe contents. This feature allows for precise control over the space surrounding the element, resulting in a personalized and visually appealing design.

The width of the Canvas Studio iframe contents should automatically adjust to fit the actual contents. The default margin and padding values displayed on the screen will be set according to the design section.

Margin and Padding Validation

To ensure proper spacing and alignment, it is important to follow certain guidelines when setting the margin and padding values for Canvas Studio iframe contents in the Loree editor.

1. Negative values: It is not allowed to use negative values for margin and padding. Negative values may disrupt the layout and cause unexpected visual issues.

2. Auto: The use of "auto" is not permitted for margin and padding. This is because "auto" values can lead to unpredictable spacing and alignment, affecting the overall design and appearance.

3. Numbers starting from 0: Only numerical values starting from 0 are allowed for margin and padding. This ensures consistency and accurate control over the spacing around the element.

4. No maximum values set: Currently, there are no maximum values set for margin and padding. However, it is recommended to use values that maintain a visually appealing and balanced layout.

By adhering to these guidelines, you can create a visually appealing and well-structured design for your Canvas Studio iframe contents in the Loree editor.

To customize the Alignment for Canvas Studio iframe contents inside Loree editor

Users have the ability to customize the alignment of any Canvas Studio Iframe contents within the Loree editor. This feature allows for greater control over the positioning of the element, resulting in a visually pleasing and well-aligned design.

The left panel should show the Design section, which provides options for customization. Under the Space category, you can choose from Left, Center, and Right alignments to customize the positioning of the Canvas Studio iframe contents within the Loree editor.

Users should have the ability to customize the alignment values for Canvas Studio iframe contents within the Loree editor. This feature allows users to easily adjust the positioning of the element to create a visually appealing and well-aligned design.

To customize the Border for Canvas Studio iframe contents inside Loree editor

When you select the Canvas Studio iframe contents within the editor, the design section will automatically open. This feature allows you to customize and design the Canvas Studio element according to your preferences.

It is important to validate the design section to ensure that it includes a border for the Canvas Studio iframe contents. This feature allows you to customize and design the Canvas Studio element according to your preferences, creating a visually appealing and well-defined design.

Users should have the ability to customize the border design of Canvas Studio iframe contents in the Loree editor. This feature allows users to easily set the border width, color, and style according to their preferences, resulting in a visually appealing and well-defined design.

Border Style

The Border Style feature allows users to customize the appearance of the border for Canvas Studio iframe contents in the Loree editor. With this feature, users can easily set the border width, color, and style to create a visually appealing and well-defined design. By selecting the Canvas Studio iframe contents within the editor, the design section will automatically open, providing users with the options to customize and design the border according to their preferences. This feature adds flexibility and creativity to the design process, allowing users to achieve the desired look for their Canvas Studio elements.

When a user applies a border style, color, and width, it should be automatically applied to the selected Iframe. The border values will dynamically fetch the correct values for the respective element, ensuring that the design is visually appealing and well-defined.

Customize the Kaltura iframe via Design section

To customize the size for Kaltura IFrame contents inside Loree editor

When selecting any Kaltura Iframe contents within the Loree editor, users have the ability to customize the width of the element. The following options are available for customization under the "Size" category:

- Full width: This option allows the content to span the entire width of the page.

- Width (% and px): Users can specify the width of the content using either a percentage or pixels.

- Height: It is not recommended to adjust the height in the design section as it is automatically scaled.

- Aspect ratio: Users can set the aspect ratio of the content to 16:9 for optimal display.

The width of the content should be determined dynamically based on the actual contents. By default, any newly added element will have a width of Full width: 100%.

If the selected iframe element has a width specified in pixels or percentage, the design section will automatically fetch and update the width value. This allows the user to easily modify the width of the content. For example, if the width is set to 600 pixels, the design section will automatically display 600 pixels. The user can then update the values and format as desired.

When the "Full width" option is selected, the Iframe element will automatically set its width to 100% and the design section will disable the option to adjust the width. You can only update the width when you uncheck the "Full width" option.

- Newly Added Kaltura Content: This section covers information related to adding new content from Kaltura to the Loree editor. It provides guidance on customizing the size and width of the content for optimal display.

- Migrated Kaltura Content from Canvas LMS: This section addresses the process of migrating Kaltura content from the Canvas Learning Management System (LMS) to the Loree editor. It offers insights on how to handle the migrated content and make any necessary adjustments.

- LMS Support: This section highlights that the features and functionalities mentioned in the knowledge article are available on all Learning Management Systems (LMS), including Canvas. It assures users that they can expect support regardless of the LMS they are using.

To customize the space for Kaltura iframe contents inside Loree editor

Users have the ability to customize the padding and margin of any Kaltura Iframe contents within the Loree editor. This allows for greater flexibility and control over the spacing around the element.

When selecting a Kaltura Iframe content, users can access the Space category in the design section, which provides options to customize the margin (top, bottom, left, and right) and padding (top, bottom, left, and right) values. These options allow users to adjust the spacing according to their preferences, creating a visually appealing and well-designed layout.

Additionally, users can customize the margin and padding values in pixels, providing precise control over the spacing around the Kaltura Iframe content.

To customize the Alignment for Kaltura iframe contents inside Loree editor

Users have the ability to customize the alignment of any Kaltura Iframe contents within the Loree editor. This feature allows for greater control over the positioning of the element, resulting in a visually pleasing and well-aligned design.

Customization Options:

To customize the positioning of Kaltura iframe contents within the Loree editor, users have the following options:

1. Space: Under the Space category, users can choose from Left, Center, and Right alignments to customize the positioning of the Kaltura iframe contents.

2. Alignment: Users can customize alignment values to further adjust the positioning of the element for a visually pleasing and well-aligned design.

To customize the Border for Kaltura iframe contents inside Loree editor

When selecting the iframe contents within the editor, the design section will automatically open, allowing users to customize the border design. Users can set the border width, color, and style according to their preferences.

When applying a border style, color, and width, it will be automatically applied to the selected Iframe. The border values will dynamically fetch the correct values for the respective element, ensuring that the design is visually appealing and well-defined.

Customize the H5P iframe via Design section

To customize the size for H5P IFrame contents inside Loree editor

Users have the ability to customize the width of any H5P Iframe contents within the Loree editor. This feature allows users to easily adjust the width of the element according to their preferences, ensuring a visually appealing and well-designed layout.

Options for Customization:

To customize the size of H5P Iframe contents within the Loree editor, users have the following options:

1. Size: Under the Size category, users can choose from the following options:

- Full width: This option allows the content to span the entire width of the page.

- Width (% and px): Users can specify the width of the content using either a percentage or pixels.

- Height: It is not recommended to adjust the height in the design section as it is automatically scaled.

The width of the content will be determined dynamically based on its actual contents. By default, any newly added element will have a width of Full width: 100%.

If the selected iframe element has a width specified in pixels or percentage, the design section will automatically fetch and update the width value. This allows the user to easily modify the width of the content. For example, if the width is set to 600 pixels, the design section will automatically display 600 pixels. The user can then update the values and format as desired.

When the "Full width" option is selected, the Iframe element will automatically set its width to 100% and the design section will disable the option to adjust the width. The width can only be updated when the "Full width" option is unchecked.

To customize the space for H5P iframe contents inside Loree editor

Users have the ability to customize the padding and margin of any H5P Iframe contents within the Loree editor. This allows for greater flexibility and control over the spacing around the element.

By selecting an H5P Iframe content, users can access the Space category in the design section, which provides options to customize the margin (top, bottom, left, and right) and padding (top, bottom, left, and right) values. These options allow users to adjust the spacing according to their preferences, creating a visually appealing and well-designed layout.

The customization options for the Space category include the ability to adjust the margin (top, bottom, left, and right) and padding (top, bottom, left, and right) values. Users can customize these values in pixels, allowing for precise control over the spacing around the element.

The width of the content is determined dynamically based on its actual contents. When selecting an iframe element, the design section will automatically fetch and update the width value if it is specified in pixels or percentage. This makes it easy for users to modify the width of the content according to their preferences.

By default, the margin and padding values are shown as per the settings displayed on the screen.

To customize the Alignment for H5P iframe contents inside Loree editor

Users have the ability to customize the alignment of any H5P Iframe contents within the Loree editor. This feature allows for greater control over the positioning of the element, resulting in a visually pleasing and well-aligned design.

To customize the alignment, users can choose from the following options:

1. Space: Under the Space category, users can select Left, Center, or Right alignments to customize the positioning of the H5P Iframe contents.

2. Alignment: Users can customize alignment values to further adjust the positioning of the element for a visually pleasing and well-aligned design.

To customize the Border for H5P iframe contents inside Loree editor

When selecting the H5P iframe contents inside the editor, the design section will automatically open, allowing users to customize the border design. Users can set the border width, color, and style according to their preferences.

The default border is set to 0px solid #000000. This feature gives users the flexibility to create a visually appealing and well-defined design for their H5P iframe contents.

When applying a border style, color, and width, it will be automatically applied to the selected iframe. The border values will dynamically fetch the correct values for the respective element, ensuring that the design is visually appealing and well-defined.

Customize the Loree Interactive iframe via Design section

To customize the size for Loree Interactive IFrame contents inside Loree editor

Users have the ability to customize the width of any Loree Interactive Iframe contents within the Loree editor. By selecting a Loree Interactive Iframe content, users can easily adjust the width of the element according to their preferences. This allows for greater control over the size and layout of the content, ensuring a visually appealing and well-designed presentation.

To customize the space for Loree Interactive iframe contents inside Loree editor

Users can easily customize the padding and margin of any Loree Interactive Iframe contents within the Loree editor. This feature allows for greater flexibility and control over the spacing around the element. Simply select the desired Loree Interactive Iframe content and access the customization options for padding and margin. This allows users to adjust the spacing according to their preferences, resulting in a visually appealing and well-designed layout.

To customize the Alignment for Loree Interactive iframe contents inside Loree editor

Users have the ability to customize the alignment of any Loree Interactive Iframe contents within the Loree editor. This feature allows users to have greater control over the positioning of the element, resulting in a visually pleasing and well-aligned design.

To customize the Border for Loree Interactive iframe contents inside Loree editor

When selecting the mentioned iframe contents within the editor, it will automatically open the design section for Loree Interactive.

Customize the Embed URL iframe via Design section

Users also have the option to customize the Embed URL iframe through the Design section. This allows them to select the Embed URL iframe and make adjustments to the width, alignment, margin, padding, and border settings.

When using the Loree editor, I can insert an Embed URL element. After validating the parent HTML of the Iframe, a small hamburger icon will appear in the top-left corner of the element. This icon allows for additional customization options and settings for the Embed URL iframe.

Users can add an Embed URL element to your content. To customize the design of the entire component, simply select the hamburger icon located in the top-left corner of the element. This will open a mini-menu with various actions, including Duplicate, Delete, Copy, Move Up (if needed), and Move Down (if needed). The mini-menu will be positioned at the center of the element for easy access and customization.

Once user have added an Embed URL element in the Loree editor, they can customize its design by selecting the hamburger icon. This icon allows me to apply design settings for the entire component.

To validate the outline border for the selection, user should ensure that the selection outline is set to 1px dashed #112299. This will give the element a visually appealing and well-defined outline.

When using the Loree editor, user can select the hamburger icon for an Embed URL element to access the Design section. In this section, user can customize the design of the element to suit my preferences.

The Design section provides several customization options, including:

Size: User can choose to make the element full width or specify a width in pixels or points. The height is not editable and is determined automatically.

Space: User can adjust the margin and padding values for the element, allowing me to control the spacing around it. The margin values include left, right, top, and bottom, while the padding values also include left, right, top, and bottom.

Alignment: User have the option to align the element to the left, center, or right, allowing me to position it according to my desired layout.

Border: User can customize the border of the element by specifying the width, style, and color. This allows me to create a visually appealing and well-defined design for the Embed URL iframe.

By accessing the Design section through the hamburger icon for the Embed URL element, user can easily customize its appearance to achieve the desired visual effect.

After selecting the Embed URL Iframe, user can apply the desired design section styles. These styles will be applied to the selected element, ensuring that it functions according to the updated style.

Bug Fixes

Selection change when user clears the boder color in Table

Selection change when the user removes the border color in a table

When the user removes the border color from the design section in a table, there should not be any change in the selection.

To begin, open the editor and navigate to any page. Next, add a table to the page. Once the table is added, select an entire cell using the cell properties. In the design section, clear the border color. After doing so, you will notice that the selection has now changed to a text element.

Alignment not working on images which are used in old templates

When attempting to align images in existing templates from the Loree-AUS environment, users may encounter issues where the alignment does not work as expected.

 

This problem arises because the display:flex property was not removed during the migration process for old templates. However, this property has been successfully migrated when opening the page inside Loree.

To apply the alignment changes to images, launch Loree-AUS and utilize Global templates that include images. When users use existing custom blocks such as templates, rows, and elements, and modify the alignment for images, the alignment changes should be applied.

The image re-render issue while applying styles to canvas studio

Previously, there was an issue where certain images were being re-rendered when applying styles in Canvas Studio. However, I'm happy to inform you that this issue has now been fixed.

Text option bubble menu UI issue

When clicking on the text tooltip icons, a black outline is currently displayed. However, this should be changed to a blue color (#112299) outline to improve the visual experience.

Text default color issue in text bubble menu

When the user clear the text color in the text bubble menu, the color is not automatically set to the default color (#00000). This issue specifically occurs when working with lists. This issue is fixed, the color should be automatically set to the default color (#00000) after clearing the text color. 

Unable to save page content to LMS via Loree

Every time a user opens a page in Loree, the classes are duplicated, resulting in double the count. For example, if a page in Canvas contains 4097 duplicate classes, it will double to 8194 classes. This duplication occurs not only for a single class but also for other classes as well.

If the total character count of a page exceeds 507,000, the page will not be saved. This feature is managed by Canvas. https://community.canvaslms.com/t5/Canvas-Resource-Documents/Canvas-Character-Limits/ta-p/529365

UI issue in Bubble Menu

The tooltip name for indent has been changed to "Indent spacing" in the bubble 

There is no problem with the bubble hover on secondary elements.

The dropdown height has been increased to accommodate more content.

When the dropdown menu is open, the selected font size, family, and unit are not visually highlighted or emphasized in any way.

Link on image with text, p tag is removed after save to LMS and reopen it

After adding a link to an image with text and saving the LMS, the p tag is unintentionally removed from the element when redirecting to the page. 

This issue should be addressed to ensure that the p tag is not removed from the element after saving to the LMS.

Migration issue in Table header

A table with a header that is different from h3 has been included in Loree.

The style changes are now visible in the bubble menu after saving to the LMS and reopening the page.

The validation does not appear as undefined when changing the table header to heading1, heading2, and other options (except heading 3) and saving the changes to the LMS.

List are not allowing backspace key to remove list items

When adding list items and applying the backspace key, the bullet items are not removed as expected.

When the user presses the backspace key, it should remove characters in a backward direction. For list items, it should remove the list bullet and place the cursor at the end of the previous list item.

Additionally, ensure that the delete key works in the forward direction, deleting characters ahead of the cursor.

Missing text on banners when using Loree

The issue occurs when using Loree to view banners. The heading text is visible when the page is opened in Canvas, but it disappears when the same page is opened in Loree.

The occurrence of this issue is linked to content migration from Canvas when accessing the Loree editor. Therefore, you have the option to save content outside of the Loree editor as a workaround.

Issues with templates in Loree

When users open an existing page in Loree to edit the template formatting, they may experience issues where the page jumps out and the text box in the header disappears.

These issues have been successfully resolved in the latest update.

Thank You.